<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport"
          content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../Styles/base.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<p>About Face 4 :交互设计精髓</p>

<p>• 利用操作系统的无障碍工具和指南。</p>

<p>• 不能覆盖用户选择的系统设置。</p>

<p>• 启用标准的键盘访问方式。</p>

<p>• 为视觉不佳的人加入显示选项。</p>

<p>• 提供只有视觉和只有听觉的输出。</p>

<p>• 不要有闪动、闪烁、闪现等视觉元素。</p>

<p>• 使用简单、明确、精练的语言。</p>

<p>• 响应时间要能满足所有用户。</p>

<p>• 使用一致的布局和任务流程。</p>

<p>• 给视觉元素添加文本释义。</p>

<p>利用操作系统的无障碍工具和指南</p>

<p>有些操作系统为视觉障碍者提供无障碍支持，如屏幕阅读器，以及声音导航辅助，如 iOS 的 VoiceOver 和 Android 的 TalkBack 。应用架构应该支持使用这些系统级」 : 具，并且遵循设计
    和实施无障碍功能的用户界面指南。请记住以下几点：</p>

<blockquote>
    • 如果按键或手势已经用于为应用程序功能激活系统级无障碍特性，你的应用程序就不 应该使用这些按键或者手势。
</blockquote>
<blockquote>
    • 打开无障碍特性时，应用要能正常工作。
</blockquote>
<blockquote>
    • 尽可能使用标准应用程序编程接口（ API) 进行输入，以保证与操作系统和第三方辅 助技术兼容，如屏幕阅读器等。
</blockquote>
<p>不要覆盖用户选择的系统设置</p>

<p>应用程序不应该覆盖某些系统设置，这些设置支持界面属性的无障碍选项，如颜色方案、 字体大小和字形等。在默认应用设置中不需要考虑这一点，但是有些无障碍选项采用的视觉提
    示应该和系统一样。同样的，应用程序应该接受任何系统级输入防范和设备的无障碍设置。</p>

<p>启用标准的键盘访问方式</p>

<p>桌面应用应该使用快捷键和热键（见第 18 章），以及合理的 Tab 键导航机制。用户应该能 够用 Tab 键遍历整套用户界面控件和内容区域：方向键应该能让用户遍历列表、表格和菜单内 容；回车键应该能激活按钮和切换。</p>

<p>为视力不佳的人加入显示选项</p>

<p>应用设置应该为视力障碍用户支持一系列选项：</p>

<p align="right" height="0pt" width="0pt">第 16 章为不同的需求而设计</p>

<p>• 高对比度（不低于 80%) 显示选项，在白色背景下，用显眼的黑色文本显示。</p>

<p>• 放大字体和加粗选项（最好能单独设置）。</p>

<p>• 如果可行的话，信息的展示还要为色盲用户考虑。</p>

<p>• 在默认界面中使用时，还要有减少界面元素动作和动画的选项。</p>

<p>此外，应用不能单靠颜色来传达数据或功能的含义，还要运用其他属性，如大小、位置、 亮度、形状和 / 或文本标签，来将意思表达清楚。</p>

<p>提供只有视觉和只有听觉的输出</p>

<p>要以声音界面的形式，如屏幕阅读器和系统级无障碍服务，给视觉障碍用户提供便利。应 用程序还要为听觉障碍用户支持冗余视觉和听觉反馈。通常，视觉障碍用户使用的界面以单独 应用的模式实现，对听觉障碍用户的支持，通常可以在标准 UI
    中，通过精心设计标准用户反 馈机制来管理，以同时包含声音和视觉元素。</p>

<p>不要闪动、闪烁、滚动、闪现的视觉元素，这条建议不言自明。闪光或者其他形式的闪烁 , 速度超过每秒两次（ 2Hz), 就会让视觉障碍用户晕头转向，还会导致患有癫痫及其他脑部紊乱
    症状的病人疾病发作。此外，对其他人来说，这也是很恼人的。自动滚动文本及其他动画，会 给视觉障碍用户带来困难，让他们陷入混乱。</p>

<p>使用简单、明确、精练的语言</p>

<p>这个建议也很直白，不需要过多解释。这是无论如何都要做的事情。界面上的文本标签和 指示性文本越短、越简单（只要描述恰当），就越容易学会和使用。</p>

<p>响应时间要能满足所有用户</p>

<p>允许用户选择较长的响应时间。根据经验来看，较长的持续时间约是应用程序中当前平均 响应时间的 10 倍，包括简短通知从发出后的持续多长时间。该原则也适用于任何动作的计时器。
    通常情况下，除非确有足够理由（如安全问题），最好不要给动作设定超时时间，如果非要设定 的话，也要允许用户自己调整。</p>

<p>使用一致的布局及任务流程</p>

<p>这也是一个对所有用户有利的建议。对于具有认知、运动神经或者视觉障碍的人来说，如 果只需要记住并使用一种导航和动作范式，而不是几种不同的甚至相互矛盾的范式，那就得到
    了最佳服务。想一想，只用一个按键就可以完成界面导航，多么方便，尝试保持导航方式在所 有视图和面板中尽量一致。</p>

<blockquote>
    323<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p>给视觉元素添加文本释义</p>

<p>最后，确保桌面应用或者网页上的任何纯视觉元素或控件都标注了文本，以便屏幕阅读器 能够清晰地读出来。例如，微软 Windows 就有隐形的工具提示，屏幕阅读器能把它们读出来。 在默认应用中，用户是看不到这些提示的。</p>

<p>同样，网页界面给视觉元素添加标签，这也很重要。这样，如果人们使用文本浏览器、基 于浏览器的声音阅读器，以及其他基于网页的无障碍工具时，能理解这些元素的含义。</p>

<p>324<br/>
    <br/></p>

<p>第 <font size="7">17</font> 章</p>

<p align="right" height="2pt" width="0pt"><font size="7">整合视觉设计</font></p>

<blockquote>
    互动设计师需要花费大量精力理解产品的用户，还要花时间雕琢界面的行 为和内容的呈现，帮助用户达到目标。不过，如果没有投入大量工作清晰地告 诉用户有哪些内容，如何与内容交互，那么上述努力就白费了。对于交互产品，
    这种沟通几乎总是视觉的，借助显示器完成（就定制硬件而言，也可以通过物 理属性来传达某些产品行为。）
</blockquote>
<blockquote>
    本章将讨论有效的目标导向视觉界面设计策略。第3部分将提供更多关于 具体交互与界面习惯用法的细节。
</blockquote>
<p><span id="filepos0001715454"></span></p>

<p><font size="6">视觉艺术与视觉设计</font></p>

<p>美术从业者和视觉设计从业者有着共同的视觉媒介。不过，尽管二者必须熟练掌握并十分 了解该媒介，但他们的工作目的不同。艺术是围绕情感或者思维关切的主题，是向艺术家，有
    时向社会总体表达自我的方式。给艺术家强加的限制很少，艺术家努力打造的产品越非凡独特， 价值就越高。</p>

<p>但另一方面，设计师的目标往往是创造具有特殊用途的人工制品，供目标人群使用。当代 艺术家的首要关切是表达自我，而视觉设计师的重点则是清晰沟通。凯文 • 米莱 （Kevin Mullet) 和达雷尔 • 萨诺（ DarrellSano)
    在《设计视觉界面》 ces) — 书中指出： “ 设计关注的是发现最适于传达某些具体信息的呈现方式。 ” 按照目标导向的方式，视觉设计师</p>

<blockquote>
    325
</blockquote>
<p>应该努力以易于理解和使用的方式来呈现行为和信息 , 支撑组织的品牌目标及人物角色的目的。</p>

<p>要清楚，该方法没有排除美学关注，而是把这些关注放到目标导向的框架里。尽管视觉交 流总是牵涉某些主观判断，但我们努力缩小品味差异。我们发现，清晰地阐述用户体验目标和
    商业目标，对于设计界面中用以支撑品牌身份、用户体验和情感响应的部分来说，是宝贵的基 础（本能处理可参阅第 3 章）。</p>

<p><span id="filepos0001718250"></span></p>

<p><font size="6">视觉界面设计元素</font></p>

<p>根本上，视觉界面设计关注的是如何处理和安排可视元素，传达行为和信息。视觉构成中 的每一个元素都有多种属性，例如形状和颜色，共同创造含义。这些属性应用于各种元素的方
    式（以及它们随着时间和交互而变化的方式）让用户理解内容和图形界面。例如，如果两种界 面对象颜色相同，用户会认为二者有关或者相似。如果两个对象颜色相反，用户会认为对象有
    某些类别差异。人类可以通过不同的视觉外观区别对象，视觉界面设计正是利用了这一点，从 而创造出比单纯使用文字更加丰富的含义。</p>

<p>雕琢视觉界面时，请谨记以下要素。</p>

<p><span id="filepos0001719243"></span></p>

<p>情景，情景，情景</p>

<p>每一份视觉设计指南都要考虑其使用情景。用户是否在上方有光源的大屏幕桌面电脑上处 理信息工作？用户是否站在黑暗的屋子里扫描屏幕，寻找一丝生物学细节？用户是否在刺眼的
    阳光下，手持你的设计，穿梭于一座城市？是否依偎在沙发上，消磨时间？如同传达品牌一样 , 必须把使用背景当做限制视觉设计的给定条件，</p>

<p><span id="filepos0001719935"></span></p>

<p>形状</p>

<p>物体是圆的、方的还是变形虫一样的？形状是人们识别一个对象是什么的首要方式。人们 倾向于通过轮廓来识别对象。菠萝的侧影，即便带上蓝毛质地，依然可以看出来是菠萝。不过，
    分辨不同的形状，比分辨其他的属性，如颜色和大小等，需要更高层次的注意力。这就意味着， 如果你的目的是抓住用户的注意力，形状并不是形成对比的最佳属性。看一眼苹果 OS X 的 Dock 栏，很容易误选：把 iTunes 图标当成
    iDVD 图标，或者在 iWeb 中把照片误当成 iPhoto ,在对 象识别中，形状这个因素不是主要的。上述图标形状不同，但大小、颜色和纹理相似。</p>

<p><span id="filepos0001721247"></span></p>

<p align="right" height="0pt" width="0pt">大小</p>

<p>物品在屏幕上相对于其他项目是大还是小？较大的物品吸引的注意力更多，它们比周边相 似物体大得多时尤为如此。大小还是有序（ ordered) 和量化（ quantitative) 的变量，也就是说，
    人们自动按照物体的大小排序，倾向于给这些差异赋予相对数量。例如，如果有四种大小的文 本，我们会认为越大越重要，加粗的内容比正常内容更重要。因此，大小属性在传达层级关系 时很有用（稍后细谈 )
    。大小差异足够大的话，完全可以迅速吸引注意力。但要注意，使用大小 可能增加成本。雅克 • 贝尔坦（ JacquesBertin) 在其经典著作《图形符号学》</p>

<p>Oa/7/i/c^) 中，认为大小是解离（ dissociative) 属性，这就意味着，如果某物体非常大或者非常 小，区别物体就很难用得上其他元素，如形状等。</p>

<p><span id="filepos0001722817"></span></p>

<p align="right" height="2em" width="0pt">颜色</p>

<p>尽管多数人谈论颜色很随意，但设计师在考虑界面颜色时必须非常精确谨慎。任何选择都 应该首先考虑用户的目标、环境、内容和品牌。然后才能考虑界面颜色色值（ value) 、色调（ hue) 与饱和度（ saturation )。</p>

<p>色值</p>

<p>颜色是深还是浅？当然，一个物体只有与背景相比较，其深浅概念才有意义。放在深色背 景中，深色类型就很模糊，但放到白色背景中，深色就很明显。和大小一样，色值可能是解离
    的。例如，如果照片太暗或者太亮，就很难看到照片的其他细节。人们能够迅速轻易地发现色 值的对比，因此，对于必须突出的元素，色值是吸引注意力的好工具。色值也是有序变量。例
    如，地图上的低值（更暗）颜色很容易被解释为深，或者较深，或者人口密度较大。</p>

<p>色调</p>

<p>颜色是黄色、红色还是橙色？色调的巨大差异能迅速吸引注意力，但用户往往对色调有多 重联想。在某些行业，色调有特殊含义，我们可以利用。例如，会计认为红色是负，黑色是正 , ( 至少在我们熟悉的西方体系中）证券交易员认为蓝色是 “ 买 ”
    ，红色是 “ 卖”。颜色还从我们所 成长的社会背景中取得含义。对于从小就成长于交通信号中的西方人而言，红色意味着 “ 停止 ”, 有时甚至代表 “ 危险 ” ，但在中国，红色代表好运。同样，西方把白色与纯洁、和平联系起来，
    但在亚洲则与葬礼、死亡有关。色调与大小和色值不同，内在不是有序或量化的，因此并不适 合传达此类数据。</p>

<p align="right" height="9pt" width="0pt">界面上最好明智地使用颜色来传递重要含义。要创造让用户跟踪隐含含义的有效视觉系统， 应该使用有限数量的色调。颜色像调色板一样拥挤在一起的 “ 嘉年华效应 ”
    会让用户不堪重负，</p>

<blockquote>
    327<br/>
    <br/>
</blockquote>
<p>限制沟通。界面品牌和沟通需求之间也会出现色调冲突，视觉设计师要用才华，避开这些陷阱 ( 还得擅长沟通交际）。色调比较棘手，因为普通大众中色盲很常见，而且色盲有很多种。</p>

<p>饱和度</p>

<p>色调鲜艳还是黯淡？是像春天的花朵，还是灰色的石头？饱和度吸引注意力的方式与色 调和色值相仿，即，对比强烈发挥作用。在一片苔藓绿的物体中，蔚蓝色会脱颖而出。饱和
    度是量化的，较高的饱和度与较高色值密切相关。虽然饱和的颜色表示兴奋、生机，但也会 带来喧闹、刺耳之感。如果调色板上过于饱和，上述的 “ 嘉年华效应 ” 会恶化，与实际内容</p>

<p>喧宾夺主。</p>

<p>HSV 结合</p>

<p>色调、饱和度和色值三个值两共同描述了界面的任何颜色，该模式称为 HSV 。（另一个常 见系统 RGB 让设计师指定给定颜色的红、绿、蓝的值。）设计师应该谨慎使用三个变量的对比 , 以及与整个调色板关联的方式。</p>

<p><span id="filepos0001728545"></span></p>

<p>方向</p>

<p>物体朝上、朝下还是指向侧面？当需要传达方向信息（向上还是向下，向前还是向后）时 , 这是又一个可以使用的有用变量。不过，某些形状或者尺寸太小，方向就很难观察，所以最好
    当做次要沟通向量使用。例如，如果想要在一幅图中显示股市下挫，可以使用朝下的箭头，不 过箭头还可以标成红色。</p>

<p><span id="filepos0001729192"></span></p>

<p>纹理</p>

<p>粗糙还是平滑？规则还是不规则？当然，屏幕上的元素并没有真正的纹理，但可以有纹理 外观。纹理很少用来传达不同或者吸引注意，因为纹理需要大量注意力来分辨。传达纹理还需 要更多像素、更高色彩分辨率。不过，纹理能够成为重要的能供性（
    affordance) 信号。看到物 理设备上的橡胶纹理区域，我们会认为这里可以抓握。用户界面（ UI )元素上的褶皱或者隆起 一般表示可以拖曳，按钮上的斜面或者阴影使它看上去可以点击。</p>

<p>目前流行的 “ 扁平化 ” 设计导致使用纹理或者拟物化逐渐减少。但我们发现，即便在高度 极简的设计中，恰当地使用少量纹理也能够大幅改善用户界面的易学性。</p>

<p>328<br/>
    <br/></p>

<p><span id="filepos0001730703"></span></p>

<p>位置</p>

<p>物体相对于其他元素的位置在哪里？就像大小一样，位置是有序和量化的变量，这就意味 着有利于传达层级消息。</p>

<p>我们可以利用屏幕的阅读顺序连续定位元素。对于西方读者而言，最重要或首先使用的元 素放在左上角。位置可以用来在屏幕上的物体之间、物理世界的物体之间创造空间关系，常用 在医学或者驾驶界面。</p>

<p>空间关系还可以反过来暗指概念关系：屏幕上聚集在一组的项目可以当做是相似的。使用 空间位置来表达逻辑关系可以通过动作进一步增强。在 iOS 的 Mail 应用中，从收件箱过渡到单
    个邮件的水平动画加强了逻辑层级，而逻辑层级被用来组织该应用。</p>

<p><span id="filepos0001731916"></span></p>

<p>文字与版面</p>

<p>文字几乎是所有用户界面的关键组成部分。书面语言传达了高度密集的细微信息，但恰当 使用文字必须小心，因为文字也有很大的可能导致混乱、复杂。优秀高效的版面本身是一个研 究领域，但下面有一些不错的经验法则。</p>

<p><img align="baseline" alt="" height="67" src="../Images/Image00120.jpg" width="54"/></p>

<p>人们主要通过形状来辨识文字。形状越清楚，文字越容易辨识，所以全部大写的文字比大 小写混合的文字难以阅读，看起来也非常吵闹。在大写文字中，缺失了常见的模式匹配暗示，
    所以需要付出更大的注意力来解读这些文字，应避免在界面中全部使用大写。</p>

<p>设计原则</p>

<p>表明这是什么用视觉；明确这是哪一个用文字。</p>

<p>必须在界面阅读文字时，应采用以下指南：</p>

<blockquote>
    • 使用高对比度文字 —— 确保文字与背景形成对比，不要使用可能影响可读性的互补色。 通用规则是采用 80% 的对比度。
</blockquote>
<blockquote>
    • 选择恰当的字体和大小 —— 一般来说， Verdana 体或 Tahoma 体等清爽的无衬线字体最 适于阅读。 Times 体和 Georgia 体等衬线字体在屏幕上会显得 “ 毛茸茸”，但可以使用
    超高分辨率屏幕、足够大的字号以及次像素平滑技术来缓和这个问题。多数情况下， 低于 10 像素的字号很难阅读。如果必须使用小字号，通常最好使用锯齿无衬线字体。
</blockquote>
<blockquote>
    • 简洁地组织文字 —— 使用最少的文字，清晰地传达含义，从而让文字易于理解。还要 避免使用缩写。如果必须使用缩写，试试使用标准缩写。
</blockquote>
<blockquote>
    329<br/>
    <br/>
</blockquote>
<p><span id="filepos0001735832"></span></p>

<p>信息层级</p>

<p>用户面对视觉界面时，会经历一个下意识的过程：评估界面上最重要的对象或者信息，这 些可见内容和控件之间有什么关系。为了让用户的解码过程迅速轻松，视觉设计师创造了信息
    层级，使用视觉属性的差异（大对小，明亮对黑暗，上对下等）来给界面分层。对于暂时式应 用，信息层级应该非常明显，在特定布局中，不同 “ 级别 ” 的重要性形成鲜明对比。对于独占 式应用，信息层级可能更加难以察觉。</p>

<p><span id="filepos0001736688"></span></p>

<p>动作及其随时间的变化</p>

<p>本节所述的任何元素会随时间而变化，以传达信息、不同部件之间的关系，吸引注意，缓 和不同模式之间的过渡，确认命令效果。例如，桌面 Mac OS 上，元素很少简单地出现和消失。 点击 Dock
    上的应用程序以后，程序会跳动，确认已经收到命令，应用正在加载。最小化窗口 不会让程序消失： “ 精灵 ” 似的动画使程序收缩变形，滑动到 Dock 上的缩略图位置。动画确认
    最小化命令已经收到，告诉用户最小化的窗口放在哪里，等待着用户再次召唤。掌握组件（尤 其是移动）如何随时间变化，对于视觉界面设计师很重要。</p>

<p><span id="filepos0001737898"></span></p>

<p><font size="6">视觉界面设计原则</font></p>

<p>人脑是一台强大的模式识别计算机，理解着目光所及之处轰炸着我们的高密度视觉信息。 人脑通过观察可视模式，找出所见事物的重点，管理流入眼睛的海量信息。例如，设想手动计
    算投出去的棒球轨迹，预测它会落在哪里。除了一支笔一张纸，还需要一套公式，以及测量球 的路径、速度、重量和风。但我们的眼睛和大脑一起瞬间就完成了，甚至没有做出有意识的努
    力。为了最有效地向用户传达应用程序的行为，视觉界面设计师应该利用用户这种先天的视觉 处理能力。</p>

<p>一章内容不足以容纳视觉界面设计这个主题。不过，某些重要的原则有助于我们将视觉界 面设计得更加吸引人，更加易用。正如本章前面所述，米莱和萨诺对这些基本原则进行了易于
    理解和详尽的分析。我们再次总结了部分最重要的视觉界面设计概念，让你能投入使用。</p>

<p>视觉界面应该做到如下几点：</p>

<p>• 传达风格/传播品牌</p>

<p>• 带领用户厘清视觉层级</p>

<p>330</p>

<p align="right" height="0pt" width="0pt">第 17 章整合视觉设计</p>

<p>• 在组织的每个级别提供视觉结构和涌流</p>

<p>• 在特定屏幕上告诉用户能做什么</p>

<p>• 响应命令</p>

<p>• 把注意力吸引到重要事件上</p>

<p>• 建立有凝聚力的视觉系统，保证体验一致</p>

<p>• 最小化视觉工作量</p>

<p>• 保持简单</p>

<p>接下来详细讨论每一种原则。</p>

<p><span id="filepos0001741051"></span></p>

<p>传达风格/传播品牌</p>

<p>交互系统日益成为顾客体验品牌的主要途径。尽管品牌考量从来不应该比用户目标更重要， 但有效的界面应该体现产品线和机构的品牌承诺。 Photoshop 与 Creative Suite 相似，与 Adobe 的品牌一致。 Outlook
    与 Office 套件的其他产品相似，有助于使微软与竞争产品区分开来。</p>

<p>因此，在开始着手界面设计之前，有必要理解品牌承诺。如果企业没有清晰地表达出来品 牌承诺是什么，就很棘手。在营销和广告材料里很少清晰地传达出来，年轻或者较小的企业或
    许没有机会发现品牌承诺到底是什么。规模较大的上市公司几乎总有营销或者设计部门来提供 品牌风格，或者愿意与交互设计师共同构建。</p>

<p>Cooper 与客户写作，挖掘出体验属性。这是一组形容词，可以用来一起描述应该如何感受 产品或者服务的任何交互（第 5 章讨论了如何创建这些属性 ) 。这些属性往往展示成 “ 词云”，
    包括较小的词，帮助变化属性词性或者消除歧义。一旦确定了，这些属性就成了界面设计的一 组指南。多数时候，这直接影响视觉设计，但也可以用来指导交互设计师在功能相似的设计之 间做出决定。</p>

<p>这些属性有时在文字之间表达张力。例如， “ 安全 ” 和 “ 灵活 ” 可能在同一个云里。这些张 力有用，因为早期样式研究能够优化一两个体验属性。这就反过来更加容易与利益相关者区分 和讨论，展示每一个属性与品牌的关系。</p>

<p><span id="filepos0001743865"></span></p>

<p>带领用户厘清视觉层级</p>

<p>在看到任何一组视觉元素时，用户会下意识地问自己 “ 这里什么重要”，接着几乎立刻就是 “ 这些东西有什么关联？ ” 我们必须保证，用户界面要通过创建层级和建立关系，来回答这两个 问题。<br/>
    <br/></p>

<p>About Face 4 : 交互设计精髓</p>

<p>根据场景，确定哪些控件和数据是用户需要立刻理解的，哪些次之，哪些只是偶尔需要用 到。这种排列贯穿了视觉层级。</p>

<p>接下来，使用基本视觉元素（位置、颜色、大小等等）区分层级级别。最重要的元素可以 大一些；色调、饱和度和 / 或色值相对于背景对比强烈一些；位置放在上面，相对于其他项目缩
    进或者悬垂。不太重要的元素可以降低相对于背景的饱和度、色值和色调，更小一些，与其他 项目的对齐保持一致。</p>

<p>当然，应该克制地调整这些属性，因为最重要的元素并非必须大、红、悬挂缩进，往往改 变其中一个属性就行了。如果发现两个重要程度不同的项目争夺注意力， “ 调低”不重要的往往 更好，而不是 “ 调高 ”
    重要的那个。这就留出了足够的空间，可以强调关键元素。这样想一想： 如果一屏上每个字都是红色粗体，哪个能凸显出来？</p>

<p>在视觉界面设计中，建立清晰的视觉层级更加困难。这需要技巧和才华才能保持整体样式， 优化信息密度，尊重特定屏幕的需求。尽管用户几乎从未留意良好的视觉层级，但糟糕的视觉 层级立马就能跳出来，引发混乱和困难。</p>

<p>建立关系</p>

<p>为了传达元素间的关系，需要回到场景中找到哪些元素间存在相似的功能，哪些元素经常 被同时使用。经常同时使用的元素在空间上可以组织在一起，减少鼠标移动。一些不必同时使
    用但具有相似功能的元素，即使没有在空间上组织在一起，也可以在视觉上组织在一起。</p>

<p>空间上组织在一起，可以让用户清晰地知道这些任务、数据和工具是有关联的，也可以向 用户暗示在这里存在顺序关系。按位置来组织也需要考虑任务和子任务的顺序，以及人眼扫描
    屏幕的习惯，西方语言基本上是按照从左到右、从上到下的顺序（我们将在本章后面详细讨论</p>

<p>这一点）。</p>

<p>位置接近的元素通常也是有关系的。在很多界面中，分组做得非常笨拙，入目之处，边框 充斥，有时甚至一两个元素也分成一组。很多情况下，只需相邻元素之间设定不同的距离，就 可以有效地实现分组。比如在一个工具栏中，每个按钮之间可能相距 4
    个像素。要将操作文件 的命令（比如打开、新建和保存等）分成一组，只需在文件操作组和其他组之间留出 8 个像素 的间距即可。</p>

<p>给不相邻的项目分组，只需赋予共同的视觉属性即可，形成一种模式，最终为用户呈现出 含义。例如， HTML 中标准的蓝色链接让用户很容易就能解析屏幕上与此内容相关的导航选项。</p>

<p>决定了要分成哪些组，以及如何在视觉上最好地传达出来，接下来就要考虑组和组之间的 区分度有多大， - 个组显示在显示器上需要多醒目。</p>

<p align="right" height="0pt" width="0pt">第 17 章整合视觉设计</p>

<p>眯眼测试</p>

<p>要确保视觉界面设计有效地采用了层次和关系，一个好方法是使用图形设计师所说的“咪 眼测试 ” （ squinttest) 。闭上一只眼睛，眯着另一只眼睛看屏幕，看看哪些元素突出、哪些元素
    模糊，哪些元素看上去分组了。改变角度总能发现此前未曾发现的布局和构成问题。</p>

<p>在组织的每一层提供视觉结构和流</p>

<p>把用户界面看作由视觉元素和行为元素组成，比较有用。这些元素按照分组来使用，分组 又被组织成窗格，窗格又分组成不同的屏幕、视图或页面。如前所述，可以依据间距或者其他
    视觉属性进行分组。独占式应用程序可能存在多个结构层次。因此，务必保持清晰的视觉结构， 这样用户根据自己的工作流程要求，可以很轻易地从界面的一部分导航到另一部分。后面的几 节将描述几种有助于实现明快的视觉结构的重要属性。</p>

<p>对齐到网格</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00320.jpg"/></p>

<p>对齐视觉元素很重要，它是设计者帮助用户有组织而系统地体验产品的一个重要途径，分 组的元素应该水平和垂直对齐（如图 17-1 所示 ) 。一般来说，屏幕上的每个元素都要尽可能和
    其他的每一个元素对齐。应该谨慎做出不对齐元素的决定，始终要实现特定的差异化效果。设 计师尤其应当注意如下方面。</p>

<p><font size="1">• Lightrpom</font> <font size="1"><i>h\t</i></font> <font size="1">edit D^vcllop Photo Sfeuings； Tools
    Vurw Window Ml ^ ® 0 ^ ^ low® Sun U：56 Q</font> <font size="1"><i>IS</i></font> <font size="2"><i>：</i></font></p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00320.jpg"/></p>

<p><font size="2">图</font> 17-1 Adobe Lightroom <font size="2">非常有效地运用了对齐到布局网格。文本、控件和控件组都严格对齐，原子间距网格完全一 致</font> , <font
        size="2">这里应该注意，控件和控件组若采用右对齐可能不利于浏览。</font></p>

<p>• 对齐标签 —— 控件的标签垂直堆放时要同侧对齐，除非标签的长度差异巨大，左对齐</p>

<p>333</p>

<p>About Face 4 :交互设计精髓</p>

<blockquote>
    比右对齐更便于用户浏览。
</blockquote>
<p>• 一组控件全部对齐一相关的复选框、单选按钮或文本字段组都应该按照规则的网格对齐。</p>

<p>• 控件组和窗格之间要对齐——控件组和其他屏幕元素组都应该尽可能使用同一个网格 结构来对齐。</p>

<p>网格系统 （grid system) 是视觉设计者最有效的设计工具之一。该系统在第二次世界大战 以后在瑞士排版人员中幵始流行，为布局提供了统一且一致的结构，对于设计视觉层次较多和
    功能上较为复杂的界面特别重要。在交互设计师定义应用的整体框架和用户界面元素（参见第 5 章）之后，视觉界面设计师应该把布局 “ 规则化 ” 到网格结构中，适当地强调高层次的元素
    和结构，并为低层次的元素或者次重要的控件留出适当的空间。</p>

<p>通常，网格将屏幕分成多个大的水平和垂直区域（参见图 17-2 )。精心设计的网格采用原 子网格单位（ atomicgridimit), 代表元素间的最小间距。比如，如果你的原子单位是 4 个像素 , 则屏幕元素和组之间的距离也应该都是
    4 个像素的倍数。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00322.jpg"/></p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font size="2">图</font> <font size="2">17-2</font> <font size="2">这个示例布局网格规定了网站使用的各种屏幕区域的大小和位置该网格保证了不同屏幕之间整齐一致，还降
    低了设计师布局屏幕的工作量，也减少了用户为阅读和理解屏幕所做的工作。</font></p>

<p><br/>
    <br/>
    <br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 17 章整合视觉设计</p>

<p>理想情况下，网格系统中，不同大小的屏幕区域之间应该保持一致的关系。这种关系一般 指比例。以下是三种常用比例：</p>

<blockquote>
    • 著名的 “ 黄金分割 ” ，也称为 “PHI” （大约是 1.61) 。黄金分割在自然界中广泛存在， 在人眼看起来尤为悦目。
</blockquote>
<blockquote>
    • 2 的平方根（大约是 1.14) 是国际纸张尺寸标准的基准（ A4 纸）。
</blockquote>
<blockquote>
    • 4:3 是大多数计算机屏幕釆用的尺寸。
</blockquote>
<p>当然，必须在理想的几何关系与具体的空间需求之间取得平衡。空间需求应视呈现在屏幕 上的功能和信息而定。即便完美地采用了黄金分割比例，但空间不够，各种元素挤在一起，则 无助于改善屏幕的可读性。</p>

<p>良好的布局网格是 “ 模块化的 ” （ modular), 也就是说，应该足够灵活，可以应对必要的变 化，同时尽可能地保证一致性。正如设计中的其他事物一样，既简洁又一致是最合意的。如果
    屏幕上的两个区域要求使用差不多大的空间，那就设成完全相同。如果两个区域需要不同大小， 那就做成明显的不同。如果网格的原子单位太小，网格就会变得复杂而难于识别。细微的差异
    就会让用户感觉不稳定（尽管他们可能也不太清楚为什么会有这种感觉），最终会导致网格不能 发挥其本来的功效。</p>

<p>这里的关键在于布局上要明确，差不多一个正方形是不行的，差不多是个双矩形也是不行 的，几乎是黄金矩形也不行。如果你要做的布局大小差不多是屏幕的几分之一，比如一半、三
    分之一或五分之一，那么就调整布局，精确到屏幕的半个、三分之一或者五分之一。一定要让 这种比例很突出、干脆且明确。</p>

<blockquote>
    在视觉界面设计中运用网格系统可以带来如下好处：
</blockquote>
<blockquote>
    • 可用性一 - 由于网格会使元素的位置更加规则，用户可以快速学会如何找到关键的界 面元素。如果屏幕的标题部分始终精确地出现在同一个位置，用户就无须思考或者浏
    览界面。一致的间距和定位可以辅助人们内在的视觉处理机制，设计良好的网格可以 极大地提高屏幕的可读性。
</blockquote>
<blockquote>
    • 美学上吸引人 —— 精心运用原子网格，在屏幕的不同区域之间建立好适当的关系，这 样的设计可以创造出一种井井有条的感觉，使用者会感觉到舒服。
</blockquote>
<blockquote>
    • 提高效率 —— 将布局标准化可以减少创造高质量的视觉界面所需的工作量。我们发现， 在设计优化阶段尽早地定义并采用网格，可以减少界面设计的迭代（ iteration) 修改。
    在精心定义的网格系统下进行设计，可以方便地修改和扩展，如果需要变更，也能让 开发者做出最合适的布局决策。
</blockquote>
<p align="right" height="3em" width="0pt">335</p>

<p>About Face 4 :交互设计精髓</p>

<p>创建逻辑路径</p>

<p>除了要精确地遵从网格，布局上也必须正确地构建出高效逻辑路径，让用户可以沿着这个 逻辑路径与界面互动（如图 17-3 所示 ) 。必须考虑到人们眼睛阅读的习惯是从上到下，从左到 右（对于按此顺序阅读的西方人而言）。</p>

<p><font size="2">好的逻辑路径</font> <font size="2">差的逻辑路径</font></p>

<p><font size="2">眼睛移动匹配界面的路径</font> <font size="2">一切充斥屏幕</font></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00193.jpg"/></p>

<p><font size="2">图</font> <font size="6">17-3</font> <font size="2">眼睛在界面上移动应该形成一个逻辑路径，让用户有效地达到目标完成任务,，</font></p>

<p><br/>
    <br/></p>

<p>界面元素平衡</p>

<p>完美对称的界面缺乏层次感，无法鼓励用户的眼睛在屏幕上流动。平衡的不对称为屏幕和 主要屏幕区域提供了视觉入口点。有经验的视觉设计师擅长通过控制各个元素的视觉重量来实
    现不对称平衡，就像在跷跷板上平衡不同人的重量一样。不对称设计在用户界面上很难达成， 因为白色空间在屏幕空间限制非常显眼。咪眼测试可以再次被用于查看显示器是否看起来不 平衡。</p>

<p><u>在特定</u> 屏幕上告诉用户能 <u>做什么</u> _</p>

<p>用户首次看到一个屏幕或者一个功能，会寻找视觉设计帮助他决定能在屏幕上做什么。这 就是第 13 章讨论的能供性原则。能供性分解成设计布局的空间和内容分类、图标、视觉符号 , 以及在可能时预览视距效果。</p>

<p>使用图标</p>

<p>除了其功能值之外，图标在传达期望的品牌属性时也发挥重要作用。如果是为孩子设计网 站，醒目、动画式的图标可能非常棒，而效率类应用程序则使用精确、保守渲染的图标更适宜。
    不管风格如何，都应该一致。如果某些图标使用粗黑线条和圆角，其他使用细细的有角线条， 视觉风格就不匹配。</p>

<p>图标设计和渲染本身是一门技艺。以低分辨率渲染图像需要大量时间和练习，最好留给</p>

<p align="right" height="0pt" width="0pt">第 17 章整合视觉设计</p>

<p>受过训练的视觉设计师。从认知角度来讲，图标是一门复杂的主题，所以这里我们只强调几 点关键之处。如果你想了解更多如何才能做出可用的图标，强烈推荐威廉 • 霍农 （William Honon) 的 “77^/( ：训丑 0 从 ”
    一书，尽管书中的例子有些过时，但是其中原则在今天仍然非常 适用。</p>

<p>传达功能感</p>

<p>设计代表功能或向对象执行操作的图标带来了一些有趣的挑战。最重要的一项挑战就是要 用图标的视觉语言代表抽象的概念。在这种情况下，最好依赖习惯用法，而不是向用户强加无 法理解的抽象表示方法，还可以考虑增加工具提示（参见第 18
    章）或者文本标签。</p>

<p>对于一些更显而易见的具体功能，可以运用以下指导原则：</p>

<blockquote>
    • 同时表达动作和动作施加的对象，以增进理解。名词和动词结合在一起比单独用动词 更易被人理解（例如剪切命令用一篇文档上加一个 X ,比单纯使用剪刀这种隐喻图像 更便于理解）。
</blockquote>
<blockquote>
    • 小心使用与目标用户想象中不同的隐喻和表现方式。例如，在西方社会中伸出大拇 指的手势表示 “0K” ，让人觉得是表达同意的合适方式，但在中东（或者其他地区） 的文化中，这个手势是冒犯人的，因此在任何国际化应用程序中都不应使用这个
    图标。
</blockquote>
<blockquote>
    • 在视觉上将相关功能分组 . 以提供空间上的使用情境。如果不行，就使用颜色或其他 的视觉主题提供使用情境的信息。
</blockquote>
<blockquote>
    • 保持图标简单，避免过多的视觉细节。
</blockquote>
<blockquote>
    • 尽可能重用元素，这样用户只需要学习一次。
</blockquote>
<p>将视觉符号与对象关联起来</p>

<p>多数应用程序在用户的工作流程中需要视觉符号来代表对象。例如，在照片管理应用中， 每一个图像文件都由一个缩略图代表。当这些符号不具有表达性或隐喻性时，就可以釆用习惯 用法（习惯用法的作用详见第 13 章 )
    。可以仅使用文本来代表这些对象，例如文件名，但独特 的视觉符号可以帮助用户快速在屏幕上找到目标。为了建立符号和对象之间的关系，在屏幕上 尽可能用该符号来代表对象。</p>

<p>设计师必须注意让视觉上不同的符号代表不同的对象类型，在一个布满相似图标的屏幕上 辨认某个特定图标与在一堆文字里辨认某个字一样困难。还有一点非常重要，即在视觉上区分 ( 产生对比）行为不同的对象尤其重要，例如按钮、滑块和复选框。</p>

<p align="right" height="4em" width="0pt">337</p>

<p>About Face 4 :交互设计精髓</p>

<blockquote>
    设计原则
</blockquote>
<blockquote>
    V^ 行为不同的元素要在视觉设计上明显区分。
</blockquote>
<p>简单地渲染图标和视觉符号</p>

<p>彩色屏幕的图形能力通常分辨率很高，这诱惑着人们用越来越多的细节渲染图标和画面， 几乎达到和照片差不多的质量。但是，这种趋势最终并没有服务于用户的目标，特别是对于效
    率类的应用。图标必须保持简单和示意性，使用最少的颜色和阴影，保持适当大小。</p>

<p>充分渲染的图标虽然很好看，但可能因几条原因而失败。这种图标不恰当地将注意力引向 了它们本身。小尺寸时显示效果不佳，这意味着要使它们易于辨认，必须占据更多额外的屏幕
    空间。另外，它们也使界面在视觉上不紧凑，因为仅有一小部分功能（多与硬件相关）能够用 这样具体的写实照片风格的图像来代表。</p>

<p>尽可能预览视觉效果</p>

<p><img align="baseline" alt="" height="71" src="../Images/Image00048.jpg" width="56"/></p>

<p>不要只用文字描述界面功能的结果（当然更不能一点描述也没有，这样更糟)，要用视觉元 素向用户传达结果是什么。不要把这一点与能供性上使用的图标混为一谈。除了用文本表示设
    置和状态，还要采用说明性的图片或图标传达行为。虽然可视化往往会占用更多的空间，但占 用的这些像素换来了清晰的表达，是值得的。近年来，微软已经意识到了这一个事实。例如， 在 Word 对话框中除了使用文本控件外，也幵始将含义可视化了。
    Photoshop 和其他图像处理软 件早就用缩略图预览视觉处理操作的结果。</p>

<p>设计原则</p>

<p>从视觉上传达功能和行为 <font size="1">D</font></p>

<p>图 17-4 中微软 Word 的打印预览显示了在当前纸张大小和页边距设置下，打印出来的文档 是什么样子。很多用户难以把 1.2 英寸左边距视觉化，而预览控件就显示出来了。微软还应更
    进一步，除了在预览控件中输出之外，允许直接输入，让用户拖动图片的左边距，会观察到滑 块的数值增大和减小。相关联的文本字段依然重要 —— 不能直接用视觉符号代替。文本显示了
    设置的精确值，而视觉控件可以准确地描述结果页面的样子。</p>

<p><span id="filepos0001774941"></span></p>

<p>响应命令</p>

<p>通过滑动、敲击或者点击执行一个命令后，用户需要看到某种响应，直到系统 “ 听到”他 们。某些情况下，输出是及时的。用户针对某些选定文本选择了新的字体，文本立刻变化，显</p>

<p align="right" height="0pt" width="0pt">第 17 章整合视觉设计</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00075.jpg"/></p>

<p>Pag* 25 <font size="1">〇</font> « 185 Wo^ds. 54.289 , ^ ^^ S 41^ , <font size="2">图</font> <font size="2">17-4</font>
    <font size="2">微软</font> <font size="2">Word</font> <font size="2">打印预览是个视觉表达应用程序功能的好例子。有了这个功能</font> <font
            size="2">.</font> <font size="2">用户就不必猜测</font> <font size="2">1.2</font> <font size="2">英寸的页边距
        有多大，在这个视图上用户可以轻松容易地看到不同尺寸的页边距的大小差异。</font></p>

<p><br/>
    <br/></p>

<p>出新样子。这种响应除了工具本身之外，不需要额外的视觉设计。</p>

<p>如果响应耗时超过十分之一秒，但不超过一秒，就需要提供细微的视觉线索，告诉用户己 经接收到命令，完成时再提供另一个线索。</p>

<p>如果响应耗时达到十秒，就必须提供某些线索，告知用户这一轻微延迟，表示过程正在运 行，常见的是使用某种循环动画和估计使用的时间。常见的例子是在网页上方显示一个能快速 载入的像素进度条。</p>

<p>如果一个过程耗时超过十秒，最好显示提示，解释延迟的原因，另外再显示一个运行进度 更新，让用户知道过程正在后台继续，过程完成后再配上有礼貌的提示，这样用户就可以返回 任务。</p>

<p><u>把注意</u> 力 <u>吸引到</u> 重要事 <u>件上</u></p>

<p>较老的软件被当做工具，用户需要四处寻找来发现重要的系统事件。但更好、更加目标导</p>

<p align="right" height="2em" width="0pt">339</p>

<p align="right" height="0pt" width="0pt">向的软件会积极向用户提供这些信息。智能手机上的通知栏就是体现这一原则的例子。只需看
    一眼，用户就知道他还有两局游戏，而对手已经走完了，来了几条新短信，还有几条社交提醒</p>

<p>需要查看。</p>

<p>吸引注意力的工具涉及人们的基本观察力，都建立在诸如大小、颜色、动作等对比之上。 把想引起注意的东西做得与众不同，就会吸引注意。这听起来简单，但需要解决两个挑战。</p>

<p>首先是吸引注意力的机制不在我们有意识的控制之下。这一点有意义，因为要考虑到，这 种机制的演变是提醒我们环境突变。所以在屏幕上用强烈的对比来呈现，就能把用户从现有的 工作中吸引过来。但如果误用，就会显得粗鲁（参见第 8
    章）。网页早期导出闪烁的丑陋标签就 是典型例子。闪烁对象会非常强烈地吸引我们的注意力，很难注意到其他东西。</p>

<p>其次的挑战是，很难在保持注意力信号有效的同时还保持体验一致。如果你的应用想要静 悄悄的气质，虽然响一声喇叭能吸引用户注意，但也就打破了应用的承诺。</p>

<p><span id="filepos0001780241"></span></p>

<p>最小化视觉工作量</p>

<p align="right" height="1em" width="0pt">界面上的视觉噪音一般是由过多的视觉元素造成的，这些多余的视觉元素将人们的注意力
    从那些传达能供性和信息的主要对象上转移到他处。用户界面也是如此。视觉噪音有多种形式 :</p>

<p>• 过分的装饰。</p>

<p>• 没有增加任何信息的 3D 渲染。</p>

<p>• 过度使用标尺、用户分离控件的元素视觉上 “ 过重”。</p>

<p>• 元素拥挤。</p>

<p>• 颜色、纹理和对比过于密集。</p>

<p>• 使用太多颜色。</p>

<p>• 无力的视觉层级。</p>

<p>混乱的界面试图在一个有限的空间中提供过多的功能，结果会导致这些控件在视觉上互相 干扰。视觉上过分装饰、混乱或者拥挤的屏幕都会加重用户的认知负荷。</p>

<p><span id="filepos0001782211"></span></p>

<p>保持简单</p>

<p>一般说来，视觉界面应该极简，例如使用简单的几何形状，有限的色盘，颜色应该以较为 不饱和的颜色或者中性颜色为主，可以适当加入一些高对比度的颜色，用以强调重要信息。在 同一个界面中，版式也不应有较大的变化 .•
    通常有一个或者两个字体，有几种不同的大小，对 于多数应用程序就足够了。</p>

<p>340</p>

<p><img align="baseline" alt="" height="67" src="../Images/Image00263.jpg" width="55"/></p>

<p><img align="baseline" alt="" height="265" src="../Images/Image00029.jpg" width="90"/></p>

<p>第 17 章整合视觉设计</p>

<p>不必要的差异是可用且一致的设计的大敌。如果两个元素之间的间距几乎一样，那就为这 个间隔做成完全一样的；如果两种字体的大小差不多，那就调整一下，做成完全一样的大小。
    任何元素之所以存在都要有足够的理由，任何差异之所以存在也要有足够的理由。如果没有足 够的理由，就干脆放弃这个元素或者消除差异。</p>

<p>优秀的视觉界面和任何优秀的视觉设计一样，在视觉上应该是高效率的。它们让最少的视 觉和功能元素发挥最大效能。为了测试某个元素是否有用或者是否多余，图形设计者和工业设
    计者常常使用一种方法将这个元素去掉，试验对预期信息的清晰度有多少影响。</p>

<p>设计原则</p>

<p align="right" height="8pt" width="0pt">删减东西，直到破坏了设计为止，再把最后去掉的东西加上</p>

<p>飞行员兼诗人 Antoine deSaint-Exup6ry 曾说过： “ 完美不是加无可加，而是减无可减。”创 作界面时，必须不断地简化视觉。</p>

<p>驱动简洁的另一个相关概念是杠杆（ leverage ),即在界面中使用一个元素来表达多重相关 的意图。例如在微软的 Windows 8 中，窗口上方标题栏左侧有个小图标（参见图 17-5 )。它一
    方面用来表示窗口的内容（比如是文件浏览器窗口还是 Word 文档），另一方面还提供控制该窗 口的一些功能，比如最小化、最大化及关闭。</p>

<table valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="center" height="0pt" width="0pt"><font size="2">&nbsp;</font> <font size="2">®!^ -</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="center" height="0pt" width="0pt"><font size="2">&nbsp;</font> <font size="2">/ v . About</font>
            </p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp; 1 <font size="2">Restore</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="center" height="0pt" width="0pt"><font size="2">&nbsp;</font> <font size="2">Move</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="center" height="0pt" width="0pt"><font size="2">&nbsp;</font> <font size="2">Size</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="right" height="0pt" width="0pt"><font size="2">&nbsp;</font> <font size="2">1 - Minimize</font>
            </p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="right" height="0pt" width="0pt"><font size="2">&nbsp;</font> <font size="2">n Maximize</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                &nbsp; 蕙 <font size="2">Ctose</font>
            </blockquote>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="center" height="0pt" width="0pt"><font size="2">&nbsp;</font> <font size="2">AK+R</font></p>
        </td>
    </tr>
</table>

<p><font size="2">A*</font></p>

<table valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p height="0pt" width="0pt"><font size="5">H-&nbsp;</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="right" height="0pt" width="0pt"><font size="2">&nbsp;</font> <font size="2">General</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="2">&nbsp;</font> <font size="2">▼ A</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="center" height="0pt" width="0pt"><font size="2">&nbsp;</font> <font size="2">a** Insert -</font>
            </p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                <font size="1">&nbsp;</font> <font size="1"><i>m m</i></font>
            </blockquote>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="2">&nbsp;</font> <font size="2">$，％</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="2">&nbsp;</font> <font size="2">f</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="center" height="0pt" width="0pt"><font size="2">&nbsp;</font> <font size="2">，Delete，</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                &nbsp; <font size="2">i|e</font> <font size="1"><i>m</i></font>
            </blockquote>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="right" height="0pt" width="0pt"><font size="2">&nbsp;</font> <font size="2">♦.0 .00 •00 私0</font>
            </p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="right" height="0pt" width="0pt"><font size="2">&nbsp;</font> <font size="2">Styles</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="right" height="0pt" width="0pt"><font size="2">&nbsp;</font> <font size="2">Format * ；</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="2">&nbsp;</font> <font size="2">r . Alignment Qj</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="2">&nbsp;</font> <font size="2">Namber</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="center" height="0pt" width="0pt"><font size="2">&nbsp;</font> <font size="2">Celts</font></p>
        </td>
    </tr>
</table>

<p>Face 4 - pages and schedule - RR 2-25-14 - Microsoft Excel</p>

<p>Page Layout Formulas Data Review View</p>

<p>Sort &amp; Find <font size="1"><i>St</i></font> Fitter <font size="2">，</font> Select <font size="2">，</font></p>

<p>Editiiiig</p>

<blockquote>
    <font size="2">I I ntegrating Visual Design</font>
</blockquote>

<blockquote>
    (3
</blockquote>

<p>12</p>

<p>13</p>

<p><font size="2">14</font></p>

<p><font size="2">15</font></p>

<p>16</p>

<p><font size="2">17</font></p>

<p>pin</p>

<p><font size="1">Page: 1 of 1</font></p>

<p>:3.1</p>

<p>li</p>

<p>13</p>

<p>15, 17, 18</p>

<p>16, part of 25</p>

<p>26</p>

<p>14</p>

<p><font size="2">18 tiev ►I }</font> AF4 chapters Reducing Work and Eliminating Excise</p>

<p>Using Metaphors, Idioms, and Affordances</p>

<p>Rethinking Data Discovery. Entry, and Storage</p>

<p>Handling Mistakes and Supporting Comparisons</p>

<p>Designing for Different Needs</p>

<p>Integrating Visual Design</p>

<p>Interaction Details</p>

<p>19. 20. 22. Desistii <font size="2">Suggested scbeduk</font></p>

<p>im for the D||ikt <font size="1">〇</font></p>

<p><font size="1">100</font> % :</p>

<p><font size="2">图17-5 Windows 8标题栏的图标是杠杆作用的一个例子。既传达了窗口的内容也能够访问窗口的配置命令。</font></p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p>About Face 4 :交互设计精髓</p>

<p><span id="filepos0001798268"></span></p>

<p><font size="6">视觉信息设计的原则</font></p>

<p>和视觉界面设计一样，视觉信息设计也有很多设计者可以充分利用的原则。信息设计大师 爱德华 • 塔夫特认为，优秀的视觉设计应该是 “ 将清晰的思考视觉化”，他还认为只有充分理解 观看者的 “ 认知任务 ”
    及一些设计原则才能够设计出优秀的作品。</p>

<p>Tufte 认为在信息设计中有两个重要的问题。</p>

<p>• 很难在一个二维表面显示多维信息（多于两个变量的信息）。</p>

<p>• 显示器分辨率不够高，不足以显示高密度信息。计算机具有一个特别的挑战一■虽然 它们能够添加动画和交互，但它的信息分布密度比纸张低。（苹果出售的某些产品配备 视网膜屏，像素很高，但这不是标准，因此假设所有用户都用是有风险的）。</p>

<p>尽管这两个问题都确实存在，但视觉界面设计者比传统印刷信息设计者具有一点优势：交 互，这是他们可以加以利用的。印刷必须一次将所有信息表达出来，电子显示则有所不同，可
    以按照用户的需要，逐步地将信息展现出来，这在某种程度上弥补了分辨率较低的不足。</p>

<p>虽然印刷媒体和数字媒体存在不同，但是有些通用的信息设计原则，不管语言、文化或者 时间是否不同都可以提高信息表现的最大效果。</p>

<p>塔夫特在其著作“他 wa/Z) 坤 / 吵他也呢”（ 1983) 中，提出了 7 大原 则，由于它们与数字界面和内容尤其有关，我们将下面的小节中简要讨论。</p>

<p>按照塔夫特的观点，视觉信息应该实现如下目标。</p>

<p>• 加强视觉对比。</p>

<p>• 显不因果关系。</p>

<p>• 显示多个变量。</p>

<p>• 在一个界面整合文本、图形及数据。</p>

<p>• 确保内容的质量、相关性和完整性。</p>

<p>• 在相邻空间上显示事物，而不按时间堆积。</p>

<p>• 可量化的数据就要量化。</p>

<p>我们将简单地讨论每一条原则，如何运用到基于软件的媒体信息的设计中。</p>

<p>342</p>

<p><span id="filepos0001802643"></span></p>

<p>加强视觉对比</p>

<p>应该为用户提供可以进行相关变量和趋势的对比手段，或者是事件前后的对比手段。对比 可以产生一种情境，使信息更有价值，更易于用户理解（参见图 17-6 )。和其他许多图形工具 一样 ，Adobe Photoshop
    经常使用预览，让用户轻易地获得交互前后的对比。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00070.jpg"/></p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 图17-6谷歌金融（Google Finance)中的图表显示了一段时间内标普500指数下的两支股票的趋势。这种显示模式可 以让投资者看到Barclays
    Bank (BCS)和UBS这两支股票之间关系紧密，而它们同标普500的关系相对松散。</p>

<p><br/>
    <br/>
    <span id="filepos0001803902"></span></p>

<p>显不因果关系</p>

<p>在信息图形中，要阐明原因与结果。塔夫特在书中以美国挑战者号航天飞机失事为例，指 出如果 NASA 科学家准备的图表条理清晰地表明了发射时空气温度与 0 型封环失效的严重性之
    间的关系，那么悲剧也许可以避免。交互界面中应该使用非模态视觉反馈（参见 15 章）告诉用 户其行为的可能结果，或提供如何完成操作的暗示。</p>

<p><span id="filepos0001804715"></span></p>

<p>显示多个变量</p>

<p>在不影响清晰度的情况下，提供多个相关变量信息的数据应该同时显示。在交互式显示中， 用户可选择幵启或关闭变量，使对比更容易，相关性（因果关系）也更清晰。投资者通常对多 个证券、指数及指标的相互关系非常感兴趣（参见图 14-9
    )。多个变量随时间演变的图形可以 帮助投资者揭示这种关系。</p>

<p align="right" height="5em" width="0pt">343</p>

<p><img align="baseline" alt="" height="291" src="../Images/Image00008.jpg" width="181"/></p>

<p><img align="baseline" alt="" height="83" src="../Images/Image00143.jpg" width="186"/></p>

<p>在一个界面中整合文本、图形及数据</p>

<p>如果图形中缺乏关键说明或图例，那么用户理解起来需要更多的力气，比带有标签和图 例的图形效率低。阅读和理解图例也是一种和导航有关的附加工作，用户不得不在图表和图 例之间来回移动，然后将两者在脑海中结合起来。图 17-7
    所示为结合文本、图形、数据，以 及输入和输出的交互例子，对用户来说这是高效率的结合。</p>

<p><font size="1"><i>f</i></font> &lt;fC&gt; Upsell Fall 04</p>

<p><i>、，匕</i> <i>_</i></p>

<p>▼ Initial Contact</p>

<p>Upsell Initial Contact</p>

<p>i Channel Rule</p>

<p>Least cost channel</p>

<p>Packages</p>

<p>Upsell HTML mailer Upsell pack</p>

<p><font size="1">Ord«r r«c«ived Interest</font></p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font size="1">Supporting</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="right" height="0pt" width="0pt">&nbsp; <i>m</i></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font size="1">Upsell Supporting</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font size="1">Packages</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font size="1">Upsell Web pers...</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font size="1">Upsell script</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>
</table>

<p><font size="1">Upsell Cascade</font></p>

<p><font size="1">Packages</font></p>

<p><br/>
    <br/></p>

<p>；：. •- iV7--1"--</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="83" src="../Images/Image00143.jpg"
                                                width="186"/></p>

<p><font size="1">Mest^e:</font> Upsell closer</p>

<p>Clos <font size="1">翁</font> r script</p>

<p>Ord^r received Not interested</p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="right" height="0pt" width="0pt"><font size="1">&nbsp;</font> <font size="1">▼ Product</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font size="1">nfo Follow-up</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font size="1">Mess^g«:</font></p>
        </td>

        <td bgcolor="#FFF" rowspan="2" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="right" height="0pt" width="0pt"><i>m</i></p>

            <p><font size="1">&nbsp;</font> <font size="1">duct Info</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp; <font size="1">Specifc Pr</font> <font size="1">〇</font> <font size="1">4</font></p>
        </td>
    </tr>
</table>

<p><br/>
    <br/>
    <br/>
    <br/></p>

<p>Upsell</p>

<p>alt email</p>

<p>Responses</p>

<p>Order received</p>

<p>Handset m <font size="1">為</font> ilftrs</p>

<p><font size="1">Plan mailers</font></p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font size="1">Message:</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font size="1">Responses</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font size="1">High Value Second Offer</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font size="1">Order received *^P</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font size="1">Packages</font></p>
        </td>

        <td bgcolor="#FFF" rowspan="5" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp; <font size="1">丨</font> <font size="1">Second Offer miller ISl|</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp; <font size="1">Supporting Message:</font> <font size="1">函</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font size="1">Responses</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font size="1">Upsell Supporting</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font size="1">Order received</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font size="1">Pack ages</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp; <font size="1"><i>Timeout</i></font> <font size="1">0</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font size="1">Web product push ® j</font></p>
        </td>
    </tr>
</table>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> 17-7 “ <font size="2">交流计划</font> ”（Communication Plan) <font size="2">是</font> Cooper <font
        size="2">公司针对外包市场营销活动管理设计的一个界面元素工具， 它为文本信息提供了视觉结构并为不同的对象类型提供了图标形象，进一步增强显示的效果。这个工具不仅提供了交流
    计划现有结构的输出，而且用户也可以通过拖放操作来修改。</font>
</blockquote>
<p>确保内容的质量、相关性和完整性</p>

<p>不要因为技术上可能，就简单地显示信息，一定要确保所显示的信息能够帮助用户实现与 其所在情境下的特定目标。不可靠或低质量的信息会破坏通过产品的内容、行为和视觉品牌建 立起来的客户信任。</p>

<p>344</p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p>在相邻空间上显示事物，而不是按时间堆积</p>

<p>如果你要表达按时间发生的变化，将这些变化安排在相邻的空间上显示，用户会更容易理 解，而不要彼此叠加。当信息随着时间堆积在一起时，就要依赖短暂的时间记忆来做比较，这
    就没有并排的对比可靠或者迅速。连环画就是一个这样的好例子，它在相邻空间上显示随时间 推进的流和变化。</p>

<p>当然这条建议适用于静态信息显示，在软件中只要技术上允许（比如内存足够大及网络连 接速度足够快等 ) ，使用动画会更有效地呈现时间轴上的变化。</p>

<p><span id="filepos0001820661"></span></p>

<p>可量化的数据就要量化</p>

<p>尽管图形和图表可以让趋势信息及其他数量信息更容易理解，但我们仍然不要放弃数字本 身的显示。例如，在 Windows 磁盘属性对话框中，饼状图可以让用户了解到剩余可用空间的大
    概情况，不过已用空间和可用空间的字节数也以数字形式显示出来。</p>

<p><span id="filepos0001821256"></span></p>

<p><font size="6">—致性和标准化</font></p>

<p>许多企业内部的可用性部门把自己看作数字产品一致性的看门人 <font size="2">。一</font> 致性意味着软件产品 的不同模块要有相似的外观、感觉和行为。有时，这种特性扩展到开发商售出的所有产品上。
    对于多数软件供应商来说，比如 Adobe 和 Google ,他们不断地从更小的厂商那里购买新的软件 产品，因而对品牌一致性的关注特别紧迫。作为一流的供应商，很明显，其最大利益是使购买
    的软件产品外观就像他们内部开发的产品。此外，苹果公司和微软都乐于鼓励自己的开发人员 和第三方开发人员创建运行与其操作系统平台外观和感觉都相同的应用程序，这样用户会感觉 到这些操作系统平台提供了无缝而舒服的用户体验。</p>

<p><span id="filepos0001822458"></span></p>

<p>界面标准化的益处</p>

<p>虽然会付出一些代价，但用户界面恰当的标准化可以解决很多问题，带来很多益处。按照 雅各布 • 尼尔森 （Jakob Nielsen) 的说法，单一界面标准能够通过提高产出和减少错误，改善
    用户学习界面的能力和提高生产率。之所以有这些好处，是因为用户在界面的其他部分，或遵 循相似标准的其他应用程序的经验基础上能更容易地预见程序行为。</p>

<p>同时，界面标准也有利于软件开发商。因为标准带来的一致性改善了易用性和易学性，降</p>

<p align="right" height="2em" width="0pt">345</p>

<p>低了客户培训和技术支持的费用。由于正式的界面标准提供了现成的决策用于渲染界面，所以 开发团队不必在项目会议上对此进行辩论，减少开发时间和工作量。最后，好的标准能够降低 维护费用，提高设计和代码的重复利用。</p>

<p><span id="filepos0001823946"></span></p>

<p>界面标准化的风险</p>

<p>任何标准的主要风险在于根据标准创建的产品不可能比标准更好。因此正如尼尔森所说， 在制定标准时，首先特别要注意确保这个标准规范了一个寘实可用的界面，能够为开发人员所 用，因为开发人员必须要根据标准规范来创建界面。</p>

<p>把界面标准视为创建优秀界面的灵丹妙药也是危险的，认为只要有了标准就可以解决所有 的界面设计问题，就如同认为只要有了《芝加哥格式手册》化）就可以写 出优秀的小说是一样不可取的。多数界面标准强调的是界面的语法，即外观和感觉，但很少涉
    及界面更深的行为，或更高层次的逻辑和组织结构。这么做的理由很充分：通用的界面标准不 知道规范化过程中融入的情境。它不考虑特定情境中的具体用户行为和使用模式，而是关注人
    类感觉和认知的一般问题。有时也关注视觉品牌，这些关注都是重要的，但它们是关于表现的 细节，而不是规则依附的交互框架。</p>

<p><span id="filepos0001825290"></span></p>

<p>标准、指南和经验法则</p>

<p>虽然标准无可争论是有用的，但它们也需要随技术的演化，以及我们对用户和用户目标理 解的演化而演化。一些从业人员和开发者对苹果或微软的用户界面标准奉若神明。两个企业都
    发布用户界面标准。而他们又随意而频繁地违背标准，事后更新指导准则。微软提出一个界面 标准，在下一版本中又毫不犹豫地改成更好的。这也很自然。界面设计仍不成熟，如果认为标 准中的好处是扼杀了真正的创新，那也是错误的。</p>

<p>最初的麦金塔系统因为超越了苹果电脑以前所有的平台和标准而获得了巨大成功：相反， Mac 的力量来自这样的事实，即厂商们接受苹果的领导，使得界面的外观、工作和行为都相似。 同样，许多成功的 Windows 程序毫不掩饰地模仿 Word
    、 Excel 和 Outlook 。</p>

<p>因此界面标准最适合作为具体的指导准则和经验法则，僵化地遵循界面指导准则或不考虑 具体情境中的用户需求，会强迫应用程序界面适应不恰当的交互模型。</p>

<p><span id="filepos0001827061"></span></p>

<p>什么时候打破规则</p>

<p>我们应该如何对待界面指导准则？与其问我们 “ 是否应该遵循标准 ” ，不如问我们“应该什</p>

<p>么时候打破标准 ” 更有用。答案是，有充分理由时。</p>

<p>第 17 章整合视觉设计</p>

<p><img align="baseline" alt="" height="67" src="../Images/Image00141.jpg" width="54"/></p>

<p>设计原则</p>

<p>遵守标准，除非有极好的其他选择。</p>

<p>但是什么才算一个充分的理由呢？只有当证明了一个新的习惯用法更好时吗？通常这种测 试很难定义，因为它很少能简化至可量化的程度。最好的回答是：当一个习惯用法被目标用户 (
    你的人物模型）试用后，大多数人认为明显更好，这就是将其用于界面的最好理由，也是工具 栏、大纲视图、标签和其他一些习惯用法出现的原因。研究者也许在实验室对这些人工制品进
    行了测试，但只有在真实的软件世界中得到有效的应用，才能证实其成功。</p>

<p>违背指导准则的理由可能最终证明不够好，并且产品可能会因此付出代价。但是你和其他 设计师会从错误中学习，这就是伯克利教授克里斯托弗 • 亚历山大 （Christopher Alexander )认 为的所谓 “ 自然过程 ”
    ：当个体企图改进方案时一种内在且未经检查的缓慢而微小进步的过程。 新的习惯用法（以及旧习惯用法的新使用）会引起风险，这就是为什么认真且目标导向的设计 , 以及在真实工作条件下进行真实用户的正确测试那么重要的原因。</p>

<p>应用程序之间的一致性和标准</p>

<p>当一个公司决定出售多种软件产品时，该公司决定所有产品在用户界面角度必须完全一致 , 这时使用标准和指导准则将遇到特殊挑战。</p>

<p>正如前面讨论的，从视觉品牌角度看虽然有些错综复杂，但非常有意义。如果人物角色和 市场分析表明，两种不同产品的用户毫无重叠，他们的目标和需求也截然不同，你会怀疑开发
    两种视觉品牌分别针对不同的用户，而不是使用单一且缺少目标性的外观是否有意义。当涉及 软件行为时，这些问题更加紧急。如果客户将这些应用软件作为套件整体使用，单一标准可能 显得很重要。但即使是这种情况，是否针对图形表现的软件，如
    PowerPoint 也应该与 Word 这 样的文本处理程序保持同样的界面结构呢？微软的意图是好的，但是在体现整体风格指导原则 方面走得太远。 PowerPoint 没有从与 Excel 和 Word
    相似的菜单结构中获得多少好处，它偏离了 用户的心理模型而迎合一种背道而驰的结构，因而失去了很多易用性。另一方面，设计师在某 些地方又有所区别， PowerPoint 确实有一个幻灯片浏览的视图，这是它所特有的一个界面。</p>

<p>因此设计师应该记住，一致性并不意味着僵化，特别在一致性不恰当时。界面和交互风格 指南准则必须随其所服务的软件而成长和演化。有时为了更好地服务于用户及其目标（有时甚
    至是你的企业目标），必须打破规则。当这种情况发生时，尽量使改变和增加与标准兼容。指导 你的是规则的精神实质，而不是规则的文字本身。</p>

<p align="right" height="9pt" width="0pt">347</p>

<blockquote>
    设计原则
</blockquote>
<blockquote>
    一致不意味着僵化 <font size="1">(5</font> ：
</blockquote>
<p align="right" height="2em" width="0pt">设计语言</p>

<p>视觉界面设计师最重要的工具之一是 “ 设计语言 ” 思想。把这门设计语言当做设计元素的 “ 词汇表 ” ，例如形状、颜色、版式 <font size="1">，</font> 以及这些元素如何组织结合。它们创造了恰当的情感色彩 ,
    建立了人们能够识别、理解的模式，理想情况下，人们还会用这种模式与产品的品牌或者创造 的服务产生积极联想。</p>

<p align="right" height="6pt" width="0pt">一个良好的例子是微软的 Metro 设计语言，这是 Windows 8、Windows Phone 和 XBox 用户</p>

<p>界面的基础。通过使用一组共同的视觉元素，例如磁贴 tiles, 微软创造了多样化的界面和体验， 容易识别（参见图 17-8 )。</p>

<p><img align="baseline" alt="" height="665" src="../Images/Image00267.jpg" width="380"/></p>

<p>图17-8微软Metro设计语言跨平台示例</p>

<p><br/>
    <br/>
    <br/>
    <br/></p>

<p>在某些情况下，这种语言变成方言。但在我们的经验中，最好通过明确的过程来实现，这 个过程评估各种可能的视觉和互动语言，是否适用于品牌，是否适合目的。最好的设计语言以
    用户为中心，在产品设计过程中演化。每一个设计决策都与其他的决策相配合，变化减少到只 要求为用户创造意义、用处和正确的情感色彩。</p>

<p>设计语言往往通过标准和风格指南传达，但重要的是要注意，二者并不是同义词。仅仅因 为有风格指南，并不意味着有成熟的设计语言，反之亦然。没有风格指南或者标准手册，也有
    可能拥有设计语言（不过，应该说，编写风格指南有助于设计师合理和简化设计语言)。</p>

<p align="right" height="38em" width="0pt">349</p>

<p><img align="baseline" alt="" height="120" src="../Images/Image00255.jpg" width="1044"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00026.jpg"/></p>

<p><img align="baseline" alt="" height="29" src="../Images/Image00206.jpg" width="37"/></p>

<p><img align="baseline" alt="" height="36" src="../Images/Image00116.jpg" width="56"/></p>

<p><img align="baseline" alt="" height="24" src="../Images/Image00310.jpg" width="36"/></p>

<p><img align="baseline" alt="" height="57" src="../Images/Image00018.jpg" width="64"/></p>

<p><img align="baseline" alt="" height="59" src="../Images/Image00187.jpg" width="93"/></p>

<p><img align="baseline" alt="" height="56" src="../Images/Image00139.jpg" width="69"/></p>

<p><img align="baseline" alt="" height="31" src="../Images/Image00189.jpg" width="165"/></p>

<p><img align="baseline" alt="" height="30" src="../Images/Image00268.jpg" width="30"/></p>

<p><img align="baseline" alt="" height="1043" src="../Images/Image00339.jpg" width="331"/></p>

<p><img align="baseline" alt="" height="152" src="../Images/Image00115.jpg" width="57"/></p>

<p><img align="baseline" alt="" height="319" src="../Images/Image00091.jpg" width="101"/></p>

<p><img align="baseline" alt="" height="57" src="../Images/Image00330.jpg" width="54"/></p>

<p><img align="baseline" alt="" height="226" src="../Images/Image00064.jpg" width="99"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00019.jpg"/></p>

<p><font size="7">交互细节</font></p>

<p>第 <font size="5">18</font> 章为桌面应用而设计 第 <font size="5">19</font> 章为移动设备和其他设备而设计 第 <font size="5">20</font> 章网页的设计 第
    <font size="5">21</font> 章设计细节：控件和对话框</p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p><font size="7">第18章</font></p>

<p align="right" height="0pt" width="0pt"><font size="7">为桌面应用而设计</font></p>

<blockquote>
    当代桌面应用的界面都源自施乐（ Xerox )的 Alto, 它是 1973 年施乐公 司的 Palo Alto 研究中心（即 PARC 公司， Palo Alto Research Center 的首字母
</blockquote>
<blockquote>
    简写）幵发出来的一个实验性计算机系统。 Alto 是第一台具有图形界面的计 算机，主要用来发掘计算机作为桌面商业系统的潜力。在发明 Alto 的同时， PARC 的研究者们创造出了现代桌面 UI 典范的四大支柱：窗口（ Window
    )、 图标 （Icon ) 、菜单 （Menu )( 及其他类似的小部件）、鼠标 （Pointer )，简 称为 WIMP 。
</blockquote>
<blockquote>
    Alto 被设计成了一个网络办公系统，使用者能够以 WYSIWYG ( What You See Is What You Get ，即 “ 所见即所得 ” ）的方式，在系统中对文档进行创建、
    编辑和查看，还可以在不同工作站之间以电子化的形式存储、调用、传输文档， 也可以通过网络将文档打印出来。 Alto, 及它的后继者 —— 施乐 Star ,在商业上 都失畋了，但它们在桌面计算机上的创新，为日后的普及做出了卓越的贡献。
    跟随它们被一同创造出来的、在今天被我们当成寻常概念的东西比比皆是：鼠 标、矩形的窗口、滚动条、（虚拟的）按钮、把计算机屏幕当成 “ 桌面”的这 种隐喻、面向对象编程、多任务处理、以太网，以及激光打印等。
</blockquote>
<blockquote>
    PARC 对整个产业和当代计算机的影响是十分深远的。 20 世纪 70 年代，史 蒂夫 • 乔布斯和比尔 • 盖茨都曾到 PARC 参观了 Alto, 并均有极其深刻的印象。
</blockquote>
<blockquote>
    史蒂夫 • 乔布斯很快意识到，施乐的创新将要颠覆整个计算机产业的未来， 于是他从 PARC 挖走了许多精英人才，准备让 Alto 和 Star 这两个在商业上已经 死掉的产品复活。他开始创造一个新的产品，取名为 Lisa 。
    Lisa 被创造了出来， 它引人注目，易于操作，令人十分兴奋，但同时也极为昂贵（ 1983 年售价为 9995 美元），速度慢得令人沮丧。不过， Lisa 也带来了一些新的图形界面的元素， 例如下拉菜单等，丰富了计算机可视化的语言。
</blockquote>
<blockquote>
    351<br/>
    <br/>
</blockquote>
<p>与此同时，诸如太阳微系统 （Sun Microsystems) 等一些公司，在更为昂贵但处理能力更强 的 UNIX 工作站上，开发出了视觉上相对较为简陋的桌面系统，受到了科学和工程领域的用户 的青睐。不过， Lisa
    在商业上的失败并没有打倒乔布斯，他开始了一项秘密工程，决心研发出 全新的廉价版 “Alto ”。</p>

<p>这项秘密工程创造出了富有传奇色彩的对我们的科技、设计、文化都有巨大影响的 Macintosh 。 Mac 单枪匹马地唤醒了整个产业对设计和审美的认识。它建立了用户友好的标准。
    当时有很多不同领域的专业人士因为整个行业对技术的狂热追求而被排斥在外， Mac 将这些专 业人士从各个不同的领域中拉回来。此时的微软，在创造出了它的第一个用于 Mac 的软件后， 也开始了设计自己的 WIMP 界面系统
    ——Windows 。在接下来的 20 多年， Mac 和 Windows 统 治着桌面计算机界面的标准。</p>

<p>本章将讨论各类现代桌面 GUI 在细节设计方面要注意的问题，特别是窗口的行为、结构、 导航部件，以及点击选择、屏幕对象的操作等。</p>

<p><span id="filepos0001848584"></span></p>

<p><font size="6">剖析桌面应用</font></p>

<p>前面的第 9 章中，我们讨论过软件的“姿态 " （ posture )。桌面应用软件的界面，有两种主 要的姿态，分别是 “ 独占式的 ” 和 “ 暂时式的 ”（sovereign 和 transient )。其中，使用最多的是 “
    独占式的 ” ，绝大多数桌面应用都采用了这种姿态。 “ 暂时式的 ” 姿态只是配角，它主要用于简 短的、临时的、大部分时间都在后台运行的任务（例如音乐播放器、即时通信软件等）。因此 ,
    本章将重点放在独占式的桌面应用，我们将了解它的基本结构模式、组成模块等。在第 21 章 , 我们也会谈及一些和桌面应用有关的内容。</p>

<p><span id="filepos0001850415"></span></p>

<p>主窗口和辅窗口</p>

<p>“窗口 ” （ window) 是桌面应用的上层（操作系统则是其底层），它是可移动的、可放大缩 小的、用于盛放内容和功能的容器。通常来说，一个应用由一个主窗口 （primary window )，以 及一个或多个辅窗口
    （secondary window) 构成。</p>

<p>主窗口</p>

<p>主窗口包含了应用的内容，该内容通常以文档的形式呈现，而文档则可以被创建、编辑和 共享等。此外，主窗口还可能包含一些其他类别的、被频繁使用的东西，如可操作的对象或供 查看和播放的媒体等。主窗口经常会被分隔成多个窗格（ pane),
    窗格也包含了各种各样的内容。</p>

<p>352</p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>通过窗格这种形式，我们可以在不同的内容对象不同的功能组和控件集之间进行导航。一般来 说，主窗口都被设计成了 “ 独占式姿态 ” ，会占据屏幕的大部分空间，并支持全屏模式。</p>

<p>辅窗口</p>

<p>辅窗口是用来辅助、支持主窗口的，呈现不频繁的属性和功能，最典型的一种辅窗口是对 话框（ dialog) 。在第 21 章中，我们将详细讨论对话框及其结构。如果主窗口中的窗格可以脱离 主窗口而独立操作，如浮动的面板（ panel)
    或工具板（ pallette), 它们也可以当成辅窗口。</p>

<p><span id="filepos0001853300"></span></p>

<p>主窗口的结构</p>

<p>一般情况下，主窗口会被分成几个功能区：</p>

<p>• 一个内容区或工作区。</p>

<p>• 一个菜单条。</p>

<p>• 多个工具栏、窗格、工具板，用于在工作区导航、选择或操作内容对象。</p>

<p>菜单和工具栏</p>

<p>菜单和工具栏是一系列有关联的动作的集合，用户可以运用这些动作指挥应用程序执行一 些操作，例如 “ 关闭文档 ” 或 “ 改变所选内容的颜色 ” 等。按照操作系统的标准规则，菜单通
    常位于屏幕或窗口的顶端，用户点击上面的文字即可操作。工具栏则更多从属于应用软件，用 户可用菜单调出或取消它。工具栏一旦被调出并处于活动状态，就会以一组可视图标的形式呈 现，可视图标通常还会配以小的文本标签。</p>

<p>主窗口中的菜单，一般以 “ 菜单栏 ” 的形式出现在窗口的顶端。传统的工具栏则直接显示 在菜单栏的下面（或者，在 OS X 系统中，位于窗口的顶端）。近年来兴起了一些新的 UI 风格， 例如微软的彩条（ ribbon),
    将菜单和工具条合二为一，是一种标签式（ tab) 的工具栏结构。由 于彩条提供了比工具栏更加详细的信息，因此具备了菜单的直观、易上手的特点。关于菜单、 工具栏，以及其他的 UI 风格，本章在后面还会进行详细的讨论。</p>

<p>内容窗格</p>

<p>内容窗格 （content pane) 中包含了应用的内容，例如一个可编辑的表格或文件，或者是 组合控件窗格（例如音乐合成软件）。在大多数的桌面应用中，内容窗格形成了主工作区 <font size="2">。一</font>
    个应用通常只有一个主内容窗格。不过，一些可以并列查看或编辑多个文档的应用（例如 CAD 软件），则可能会有多个主内容窗格。这时，对象可以在多个窗格之间拖曳，多个窗格的内容 也会发生交互。</p>

<blockquote>
    353<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精應</p>

<p>索引窗格</p>

<p>索引窗格 （index pane) 为用户提供导航，用户在这里访问并选取文档或对象，被访问的文 档或对象最后会展现在内容窗格中，供査看、编辑、配置等。这里常见的情况有两种：第一种
    情况，选取了索引窗格上的对象后，内容就直接出现在内容窗格中（例如电子邮件应用，在索 引窗格中选择了一封电子邮件后，该电子邮件的内容就直接出现在内容窗格中了）。第二种情况，
    用户从索引窗格中选取对象，并把对象拖放至内容窗格中，对象的原有内容保持不变，这种情 况经常出现在创作类软件中，此时索引窗格通常是存放数据资产库或元数据的地方。</p>

<p>工具板</p>

<p>工具板 （tool palette) 和工具栏（ toolbar) 看起来很相似，但工具板只有单一功能。用户通 过工具板，可快速选择工具。工具板中的每个工具都有一套自己独特的操作动作，例如点击、
    拖放等。这种快速的模式转变，一般来说，会通过光标的外形变化暗示用户，而此时的光标外 形通常会被设计成能够反映出当前模式或工具语义的样子。</p>

<p>工具板通常位于主窗口的左侧，而且一般是垂直放置的。关于它的细节，本章在后面还有 详细的讨论。</p>

<p>侧栏</p>

<p>侧栏是近年来才出现的一种习惯用法，现在已经被广泛使用。通过侧栏，用户可以方便地 设置文档或对象的属性，而无须弹出模态对话框或非模态对话框。这对于创作类的应用来说，
    提升了操作效率，让任务流更流畅。侧栏通常位于主窗口的左侧或右侧，有时两侧都有，有时 还会出现在底边或工具栏中。我们在本章的后面，会对它进行详细的描述。</p>

<p><span id="filepos0001860145"></span></p>

<p><font size="6">桌面系统中的窗口</font></p>

<p>PARC 所创造的 WIMP 中，最基本的要素之一就是包含了应用程序的控件和文档的矩形窗 口。在现代 GUI 中，矩形的主题占据着统治地位，无处不在，因此它常被看作是视觉交互的关 键因素。</p>

<p>为什么要用矩形来显示数据？这里有着非常自然的原因，其中可能最不重要的一点是因为 它和我们使用的显示技术匹配。即，相对于其他的形状，阴极射线显像管（ CRT )和液晶显示 器（ LCD)
    处理矩形的速度更快。而更重要的原因是，人们常用的数据输出格式绝大多数也都 是矩形。自古登堡（ Gutenberg, 德国活版印刷术的发明者）开始，我们就是在矩形纸张上阅读
    文本的。大多数其他输出形式，例如照片、电影、视频等，也符合矩形的形状。矩形是我们最</p>

<p>354</p>

<p>容易理解的。此外，矩形的空间利用率也是非常高的，矩形还能提升人的工作效率，有利于简 化人的认知过程。</p>

<p><span id="filepos0001861981"></span></p>

<p>层叠窗口</p>

<p>在 PARC 系统、 Lisa 和 Mac 中的桌面上，可以层叠放置多个窗口。多个窗口可以被堆叠起 来，一个窗口可以被拖放到其他窗口的上方（处于下方的窗口在视觉上会变得模糊），窗口的尺 寸还可以被放大或缩小。</p>

<p>层叠窗口这种交互方式告诉我们，和敲击键盘输入总也想不起来的命令相比，有更好的方 法来在当前多个并发任务中切换。这种层叠矩形的视觉隐喻看起来没有什么问题，似乎也能操
    作自如，因为我们真实世界中的办公桌桌面也是这样的，通常桌面上面堆叠着纸张。当你想要 阅读或编辑某个文件时，你从纸堆里把它抽出来，放到最上面，便可以幵始工作。虚拟的桌面 模仿了真实世界中的交互方式，这个初衷是好的。</p>

<p>然而，同真实桌面一样，虚拟桌面面临着桌面尺寸有限的问题。我们试想一下，如果真实 桌面与笔记本电脑的屏幕一样大，只有 15 英寸，上面堆满了纸张，那将会是什么情景？层叠窗
    口的想法是好的，但在没有其他交互导航的辅助时，它真的不太实用，用户无法有效地在多个 软件和文档中导航。</p>

<p>层叠窗口还有其他的问题。如果用户点击鼠标时不小心偏离了几个像素的位置，他要找的 应用可能就会立即消失，而被错误点中的那个应用则会跳出来。微软的用户测试显示，通常来
    说，一个平均水平的使用者可能会多次运行同一个文字处理器。因为他误以为原来已经打开的 文字处理器 “ 丢失 ” ，必须重新开始。类似这样的原因促使微软引入了任务栏。而苹果公司，为 了解决这个问题，则开发出了 Expose 。
    Expose 看似不错，可以用来追踪所有打幵的窗口，然而， 由于它和 Dock (OS X 上类似微软任务栏的东西）集成得不好，所以用起来还是有些问题。</p>

<p>关于层叠窗口的另一个头疼的困惑来自于用层叠方式的其他控件，比如我们熟悉的对话框就 是其中的一个，还有菜单和浮动工具板。这样的层叠在单个应用程序中是自然的，也是一种很好
    的习惯用法。它甚至还有些隐喻的意思，就像某人交给你一个重要的备忘录一样。不过，这些大 量的层叠会造成视觉干扰和混乱，让人感到不舒服，同时，各个层叠元素的从属关系也很模糊。</p>

<p><span id="filepos0001865536"></span></p>

<p>平铺窗口</p>

<p>在苹果的 Macintosh 取得了商业上的胜利后，微软的比尔 • 盖茨带领着他的工程师们，创 造出了 “ 视窗 ” （ Windows) 操作系统，以回应苹果和施乐在 GUI 上的成功。</p>

<p>About Face 4 :交互设计精髓</p>

<p>第一版的微软Windows稍微偏离了苹果和施乐创建的模式。Windows 1.0不用层叠矩形窗 口代表桌面上相互重叠的纸张，而是依靠所谓的平铺技术（tilting,也译为“堆叠”）为用户在
    屏幕上同时显示多个应用程序。（实际上，施乐PARC的CEDAR系统，早于微软创建出了世界 上第一个平铺的窗口管理器。）</p>

<p>平铺，意味着多个应用程序可以用统一的小矩形来均分屏幕，在均分的屏幕空间中运行每 一个应用。当时，大家认为平铺是解决层叠窗口定位和导航缺陷的理想方法，平铺窗口之间的 导航比层叠窗口要容易得多，但像素的浪费非常惊人。</p>

<p>此外，和CEDAR不同，Windows 1.0并没有强制对齐所有的平铺窗口，这样带来的问题是， 只要用户移动了整洁的平铺窗口，则必定要重新整理层叠窗口。平铺窗口，这种习惯用法，并
    没有成为主流，但在今天我们仍然可以看到一些这样的交互方式。例如，在Windows 7中，右 键点击Windows的任务栏，选择 “ 堆叠显示窗口 ” ，就可以看到平铺的窗口。Windows 8中的 “ 幵始菜单 ”
    ，它利用了以前平铺窗口的概念，可以像瓷砖一样动态更新平铺的应用，在运用方 式和可用性方面有所改进。</p>

<p><span id="filepos0001868327"></span></p>

<p>虚拟的桌面空间</p>

<p>层叠窗口不能解决多个运行应用之间的导航问题，因此许多开发商继续努力寻找新的解决 方法。于是，虚拟桌面 （virtual desktop) 或会话管理器 （session manager ， UNIX 平台上用得较
    多）诞生了。单个虚拟桌面可以将桌面扩展至物理屏幕的数倍大，而且可以同时运行多个虚 拟桌面。（苹果的 OS X 称之为 Space 。 ®) 屏幕上会显示各个虚拟桌面的缩略图，每个虚拟桌
    面缩略图中会显示正在运行的应用和窗口的缩略图，而该状态会被保留至下次重新登录时。 点击某个虚拟桌面的缩略图即可激活并切换到该虚拟桌面上（或者用键盘操作）。有些版本中，
    用户还可以将微型窗口缩略图从一个虚拟桌面拖到另一个虚拟桌面。</p>

<p>这种应用和窗口的 “ 元管理 ” （ metamanagemem), 对于高级用户来说是非常有效的，他们 可以同时运行和管理很多应用。</p>

<p><span id="filepos0001870137"></span></p>

<p>全屏应用</p>

<p>对于高级用户来说，虚拟桌面十分优雅地解决了一个复杂的问题。但对于大多数的普通用 户来说，如何管理多个窗口，如何避免在多个窗口迷航，怎样才能让大多数的普通用户都可以</p>

<p>①译注：中文版OS X也叫作桌面。</p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>顺利地在多个应用中导航呢？</p>

<p>多个窗口共享一个小小的屏幕，不管是层叠还是平铺（尽管它们的确还是有点好处的）都 解决不了大多数人的问题。不过，从苹果和微软最新发布的操作系统来看，我们正在进入一个
    全屏应用的时代。当单个应用占主导地位时，会占据整个屏幕。任务栏这样的工具，只要从应 用那里借用较少的像素，就可以提供可视化的导航。（这种概念与 Mac 早期的 Switcher 类似，
    能在全屏显示的应用程序之间来回切换。）任务栏是解决导航的好办法，相对于其他的解决方 案，使用了较少的像素，降低了用户的困惑，尤其适用需要长时间使用当前应用。在 OS X 和 Windows 8
    中，用户可以选择让应用全屏或者层叠。随着平板电脑和智能手机的普及，大家更 加偏爱全屏的使用体验。</p>

<p><span id="filepos0001872222"></span></p>

<p>多窗格应用</p>

<p><img align="baseline" alt="" height="32" src="../Images/Image00218.jpg" width="57"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00106.jpg"/></p>

<p>有一种习惯用法吸收了平铺窗口的精华，将这些平铺窗口安排在一个独立的全屏应用中， 这就是多窗格窗口 （multipaned window )。多窗格窗口由一个窗口内的多个独立视图或窗格 (pane)
    组成，相邻窗格被固定的或可移动的间隔条或分割线（ splitter) 隔幵。微软的 Outlook 就是最典型的一个多窗格应用。在同一屏幕上，多个独立的窗格分别显示着邮箱列表、选中的
    邮箱内容、选中的消息、即将发生的日历安排和约会等（图 18-1 )。</p>

<p align="center" height="0pt" width="0pt">*</p>

<p><font size="1"><i>HOMt</i></font> StMD/RfaiVf</p>

<p>FOUXR Vlf：w</p>

<p><font size="2">图</font> 18-1 <font size="2">微软的</font> Outlook <font size="2">是多窗格应用经典样例最左边的窗格列出了邮箱列表。用户可以在不同视图间转换，比如邮
    件和日历。中间上方的窗格显示了当前邮箱内的所有邮件，其下方的窗格显示了当前邮件的内容，右边的窗格则显示了 即将到来的</font> 3 <font size="2">次约会和任务</font></p>

<p><font size="5">357</font></p>

<p>About Face 4 :交互设计精髓</p>

<p>多窗格应用的好处在于，独立而相关的信息可以在单个独占屏幕上轻松显示，并将导航和 窗口管理的附加工作减少到几乎为零。对于任何一个复杂的独占式应用，相邻窗格的设计尤为 必要。特别是在一个窗格中提供导航和 /
    或构造元素，在相邻的另一个窗格中提供数据查看或数 据构造的设计，都是很有效的方式，值得我们考虑。</p>

<p>多窗格的另一种形式是堆叠窗格 （stacked pane) 或标签（ tab) ，这些形式在偏好设置、属 性，以及其他各类对话框中用得最多，在独占窗口中有时也非常有用。微软的 Excel 就是一个 非常典型的例子， Excel
    在视图底部有反转标签，通过它们用户可以访问所需的电子表单 。Excel 在表单上运用了堆叠窗格。</p>

<p><span id="filepos0001876294"></span></p>

<p>窗口状态</p>

<p>在有了可以扩展到全屏幕的能力后，软件的主窗口可以处于如下 3 种状态：最小化、最大 化、多元化（ pluralized )。</p>

<p>最小化窗口缩小为桌面上的图标（早期的 OS 上），或者是缩小为任务栏（ Windows )或 Dock (OS X) 中的图标。最大化窗口将充满整个屏幕，覆盖住所有下面的东西。</p>

<p>不知为何，微软和苹果都设法避免直接提到第 3 种状态。在微软的系统菜单中（单击窗口 标题栏的左上角可以看到）提示了它的名字，菜单中有一个叫作 “ 还原 ” （ restore) 的动词，描 述了这第 3
    种状态。这个功能将最大化的主窗口还原成 “ 其他 ” 状态，即多元或还原状态。</p>

<p>多元是一种中间状态，窗口既不缩小也不全屏。当窗口处于多元状态时，它与另一些图标 及其他在多元状态下的窗口共享屏幕。多元状态的窗口，既可以平铺，也可以层叠（实际上， 通常是层叠）。</p>

<p>独占式应用的正常状态应该是最大化。除了支持程序之间的切换，或者在程序和文档之间 拖放数据（后者可以通过工具栏控件完成）外，几乎没有什么理由使独占式应用处于多元状态。 一些暂时式应用，如 Windows 的资源管理器、苹果 OS X
    中的 Finder 、计算器程序，以及很多 时下流行的即时通信和社交程序等，最适合显示为多元状态的窗口。</p>

<p><span id="filepos0001879178"></span></p>

<p><font size="5">窗口和文档：</font> MDIvs. SDI</p>

<p>如果想从一个表格中复制一个单元格，将其粘贴到另一个表格里，那么你必须先打开一个 表格，再打开另一个表格，最后再关闭这两个表格，这有点烦琐、让人讨厌。如果可以同时打 开两个表格，则好多了。有两种方法来做到这一点。第一种方法 .•
    一个表格应用中，可以包含 两个以上表格实例。第二种方法：同时打开多个表格应用，每个应用中只有一个表格实例。</p>

<p>358<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>在 Windows 早期版本中，微软选择了第一种方法，这是出于简单实用和节约系统资源的考 虑。微软称之为多文档界面 （multiple document interface) ，简称为 MDI 。包含了多个表格（文档）
    的单个应用与多个应用相比，可以节省存储和 CPU 资源，但操作效率上很成问题。不过，历经 多年的发展，微软最终放弃了 MDI ，接受了单文档界面 （single document interface) ，简称为 SDI 。</p>

<p align="right" height="6pt" width="0pt"><img align="baseline" alt="" height="70" src="../Images/Image00324.jpg"
                                               width="57"/></p>

<p align="right" height="0pt" width="0pt">不过， MDI 的存在依然有它的合理性，尤其是使用者需要在一个环境下处理多个有关联的 信息视图时， MDI 还是很有用的（例如， Photoshop
    软件中的一套预览模型 （screen mockup ))。</p>

<p>设计原则</p>

<p>无论是运用哪种交互习惯用法，都要考虑实际运用场景的客观情况,,</p>

<p>一般来说， SDI 使用起来比较简单，操作效率较高，是一种不错的交互方式，但我们也不 能把它当做包治百病的万能药。虽然 SDI 令多个微软 Word 文档的来回切换变得很方便，但在
    某些应用软件中，大量的数据来回切换，谁也受不了，例如企业采购计划软件中，采购员查看 供货商的发票和账务记录时，无论如何也受不了在多个不同的实例间来回切换。</p>

<p>MDI 由于 “ 窗口中的窗口 ” 的特点，可能会被滥用。如果 MDI 里的某个文档视图需要最 大化，则在该 MDI 容器里的多个文档之间的导航就成了问题。我们先前讨论过的最大化、最小
    化、多元状态的窗口所面临的各种老问题，将会再次出现在 MDI 应用内的文档窗口上。使用者 将不得不管理一个大窗口内的多个小窗口，这明显是令人憎恶的额外工作。这时，每次管理一 个窗口则要好得多，或者允许平铺打开的文档，或是用选项卡（
    Tab) 的方式进行管理也可以， 例如 Photoshop 就是这样做的。</p>

<p><span id="filepos0001884272"></span></p>

<p>窗口的运用</p>

<p align="right" height="1em" width="0pt">如前面所述，桌面应用由两种窗口组成，即主窗口和辅窗口（如文档和对话框)。决定在应 用中使用哪种窗口，是定义设计框架 （Design Framework,
    参见第 5 章）时要重点考虑的事情。</p>

<p>不必要的房间</p>

<p>如果我们把应用想象成一个房子，则每个窗口就是房子里的一个单独的房间。房子本身用 主窗口来表达，每个房间可以是一个窗格、文档窗口或对话框。在现实生活中，我们不会无端
    地为房子添加房间，除非它能提供其他房间无法提供的功能或用途。同理，我们也不应该随意 给应用程序增添窗口，除非它有现有窗口无法满足或者不应该满足的特殊意图。</p>

<p>从使用者目标和心理模型的角度来考虑是否增加窗口，是很重要的。我们可以这样来想这 个问题，进入一个房间是有一定意图的，而不一定因为房间的具体功能而进入。</p>

<p align="right" height="1em" width="0pt">359<br/>
    <br/></p>

<p>About Face 4 :交互设计精髓</p>

<p><img align="baseline" alt="" height="70" src="../Images/Image00228.jpg" width="54"/></p>

<p>设计原则</p>

<p>对话框是一个房间，去之前要有个好理由,</p>

<p>即便现在，太多辅窗口是一个萦绕桌面应用软件的挥之不去的顽疾。程序员经常会把应用 程序分解成很多个离散的功能，这样用户界面也被离散地开发了出来。而开发对话框这类工作，
    对于程序员来说是小菜一碟。这样的结果显而易见，每一个功能都会对应一个对话框。当然， 有些程序员希望开发出更好的用户体验的界面，他们便不借用现成的 GUI 开发工具自行构造自
    己的界面。结果是，这些初衷良好的程序员开发出了太多的不必要的房间——这些辅窗口包含 的大量功能本该归类于主窗口中的窗格或其他工具栏。</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00052.jpg"/></p>

<p>例如，在 Adobe Photoshop 中，如果你要改变一个图片的亮度和对比度，这其实是一个很 简单的操作，但你必须首先要进到丨 mage ( 图像）菜单中，打开 Adjustments ( 调整）子菜单， 然后选择
    Brightness/Comrast ( 亮度和对比度）命令来设置。这便调用了一个对话框，你可以在 这个对话框中进行调整（参见图 18-2) 。这种顺序如此常见，几乎不会引起注意，但不可否认
    这是一个拙劣的设计。在绘图应用中改变图像的属性是首要任务，图片在主窗口中，所以改变 它的工具也应该放在主窗口中。亮度和对比度是重要的图像属性，并非绘图应用软件无关紧要 的任务，而是不可或缺的重要组成。<br/>
    <br/></p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00052.jpg"/></p>

<p><font size="2">图</font> 18-2 Adobe Photoshop <font size="2">中的一个多房间的例子，亮度和对比度我们都已经习惯了这样的现实，即想要执行某个功
    能，就必须要调出一个对话框，所以我们几乎感觉不到这一点。但这的确给使用者带来了不必要的工作，而且这个对话 框也挡住了屏幕上最重要的内容</font> —— <font
        size="2">正在处理中的图片。最近几年发布的新版</font> Photoshop <font size="2">中，开始逐步将常用的功能放 入到非模态的侧栏中：</font></p>

<p><font size="5">360</font></p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>将功能放在对话框中，强调了它们和主任务是分开的，在对话框中调节亮度和对比度本身 并没有问题，但就用户体验而言却是蹩脚的。从程序员的角度来看，改变亮度和对比度是一项
    与其他功能无关的独立功能，所以他很自然地把它设计成一个单独的对话框。但从用户的角度 看，它是构成整个工作任务的一部分，应该包含在主窗口内。</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00184.jpg"/></p>

<p><img align="baseline" alt="" height="69" src="../Images/Image00257.jpg" width="54"/></p>

<p>在 Adobe 的 Lightroom 应用中，这种情况有了很大的改善。 Lightroom 应用被划分成了多个 视图或者说 “ 房间 ” ，每个房间都有其不同的用途，即 Library 、 Develop 、 Slideshow 、
    Print 、 Web 。在 Develop 房间中，亮度和对比度的调节可以在主窗口右边的窗格中进行，在此还可以 对图片进行其他的调节操作，如图 18-3 所示。</p>

<p align="center" height="1em" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00184.jpg"/></p>

<p><font size="2">图</font> 18-3 Adobe <font size="2">的</font> Lightroom <font size="2">比</font> Photoshop <font
        size="2">进步了许多，关键的操作都按照用途被安排在一起，在主窗口上靠近所编 辑图片的位置上被直接展现出来。</font></p>

<p>设计原则</p>

<p align="right" height="8pt" width="0pt">将功能置于需要它们的窗口中</p>

<p>无须多言，滥用辅窗口会导致导航问题，给用户带来不必要的负担，我们要尽量在应用程 序中避免这种窗口污染 （window pollution )。</p>

<p>必要的房间</p>

<p align="right" height="0pt" width="0pt">有些情况下，为特定功能建立独立的房间是适合的，更是有必要的。如果你打算游泳，却
    被带到一间宾客满座的客厅，让你在这里更换衣服，这肯定是不可思议的。你需要一间单独的</p>

<blockquote>
    361<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p>更衣室，这是个基本的礼貌和文明问题。在这种情况下，给有类似特殊需要的人，提供一间单 独的房间，完全是恰当的。</p>

<p>当用户执行非日常功能时，应用程序必须提供特殊场所。例如，清除数据库就不是日常事 件，它需要非日常操作。数据库软件中，有些操作是日常操作，例如输入和测试记录等，但清
    除数据库并非日常操作。这时，我们有必要运用一个单独的对话框来进行清除操作。引导用户 去一个单独的房间 —— 窗口或对话框 —— 执行清除功能是非常恰当的。</p>

<p>使用目标导向的思维方式，我们可以研究每个功能，并使之达到最好的效果。例如，如果 有人用绘画软件画图，其目标是创建一副效果很好、让人满意的绘画作品。此时，尽管所有的
    绘画工具都与这个目标直接相关，但在所有的绘画工具中，铅笔、画笔、橡皮擦这三者，与绘 画目标的关系最为紧密。这三样工具应该紧密地合为一个工作间，就像现实中的画家在画布上
    作画一样，他会把这几样工具放在最顺手的近处。最常用的工具必须放在绘画者能顺手拿到的 地方，远一厘米都不行。如果说让画家站起来、走到另一个房间去取，则更是连想都不要想不
    应该的做法。应用软件也该如此，绘画工具应该排列到画图空间的边沿，单击就可以使用，用 户不必调用菜单或对话框来完成任务。</p>

<p>举个例子， Corel 公司的 Paintei• 软件将绘画者所需的工具放在托盘里，你可以将常用的工 具移到托盘前面。尽管只要你愿意，就可以把不同的托盘或工具栏隐藏起来，但它们在默认状
    态下是主窗口的一部分，并且也能放在窗口的任意位置。假如你创建了一把画笔，例如带有特 殊红色阴影的细炭笔，你需要多次使用它，只要简单地 “ 撕开 ” 工具栏，将其放到工作区里任
    何你愿意的地方，就像绘画者把炭笔放在托盘里一样，这种工具选择的设计，模仿了现实作画 时操作工具的使用方式。</p>

<p>另一方面，如果用户决定导入一张剪贴画，尽管这项功能与创建一幅好画的目标有关，但 它所用的工具与绘画不直接相关。剪贴画画册这个东西，显然与用户绘画的目标不协调——它
    只是达到最终目标的一种手段。现实中的画家也许不会在其图板上放一本剪贴画的书，但他 可能希望附近有一本，也许就放在靠近制图板的书架上，甚至不必起身就能拿到。在软件中
    剪贴画工具也应该易于获取，但它毕竟不是经常使用的工具，所以应该把它放在单独的地方， 例如对话框中。</p>

<p>当用户完成了艺术品的创作，他就达成了创造一幅有效图画的原始目标。这时，他的目标 发生了变化。新的目标是保存和保护图画，并通过它交流。钢笔和铅笔的使命已经完成，剪贴
    画画册也不再需要了，现在这些工具被隐藏起来也无妨。现实中，画家会将工具收起来，把画 作从制图板上取下，拿进大厅，喷定色剂，然后将它卷起来，放进邮寄用的纸筒。画家收起绘
    画工具的目的在于，他不希望绘画工具被定色剂污染，也不希望绘画工具中的各种涂料和炭笔</p>

<p>362</p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>意外触碰到画作。邮寄用的纸筒不常使用，且与绘画过程无关，所以画家将它们储藏在壁橱里。 软件中对应的过程是，用户结束绘画，将绘图工具放到一旁。然后在硬盘中找一个合适的位置
    存储图像文件，通过电子邮件发给他人。从用户的角度看，这些功能在目标和动机上明显地不 同于画图。</p>

<p>通过研究用户目标，我们能自然地找到应用软件表现的恰当形式，不是简单地将每种功能 都设置进一个对话框；相反，我们看到一些功能完全不应该放在对话框中。一些功能应该放到 从属于界面主体的对话框中，还有一些功能则应该从应用中彻底删除。</p>

<p><font size="6">菜单</font></p>

<p>菜单恐怕是 GUI 祠堂里最古老的习惯用法。许多概念和技术的同时出现，使得菜单这种图 形界面成为可能：如鼠标、内存映射视频、功能强大的处理器（在当时来说 ) ，以及弹出窗口。
    弹出窗口是出现在屏幕上的一个矩形，它会层叠和模糊屏幕上的主要部分。在完成工作时消失 , 不会改变原来屏幕的模样。弹出窗口用来实现下拉菜单和对话框。</p>

<p>在现代 GUI 中，菜单出现在屏幕或窗口顶端的菜单栏中。用户指向并单击一个菜单标题， 即可在下方弹出一个选项列表小窗口。 Windows 操作系统中的菜单标题，在视觉上会出现“反 转效果 ” ，用来表示 “ 受范性 ”®
    。下拉菜单的一个变体是弹出菜单，当你单击（更常见的是右 击）一个对象时，尽管它没有菜单标题，但也会弹出一个菜单。</p>

<p>打幵一个菜单后，用户通过一次单击或拖动释放做出一个选择。用户在菜单上做出一个 选择后，要么立即生效，要么会弹出一个对话框，之后菜单便收缩到原来的只有菜单标题的 样子。</p>

<p><span id="filepos0001901661"></span></p>

<p>把菜单作为教学工具</p>

<p>如前面第 16 章所述，菜单是一种教学工具。菜单和对话框这两种 GUI 习惯用法，如今比 比皆是，但在 25 年前并不常用。那个时候，当人们首次打开一个应用软件的时候，要花上好长
    时间才能弄明白它到底能做什么。而在今天，要想初步了解某个应用软件的功能和用途，最好 的方法就是通过菜单和对话框来看所有可用功能。我们这样做，就好比贴在餐馆入口的菜单， 可以让就餐者了解餐馆的菜品类型、菜式、套餐和价格。</p>

<p>①pliancy，译注：意思是，它是可交互的。</p>

<blockquote>
    363
</blockquote>
<p>设计原则</p>

<p><img align="baseline" alt="" height="67" src="../Images/Image00363.jpg" width="54"/></p>

<p>用菜单来提供一条学习的途径。</p>

<p>了解应用能做什么和不能做什么、了解它的能力范围，是创造学习氛围的基础特征之一。 否则很多易用的应用也会因为没有简单、轻松的方式让人了解它的功能，而将用户推之门外。</p>

<p><img align="baseline" alt="" height="162" src="../Images/Image00262.jpg" width="211"/></p>

<p>理解工具栏或直接操作，对于新用户来说可能太难了，但菜单的文本特性有助于功能解释， 相比之下则简单多了。与图标按钮（图 18-4) 相比， “ 格式库 ” 这三个字对于新用户来说，更 具启迪性 —— 每个人都知道 “ 格式库 ”
    这三个字是什么意思（当然工具提示（ ToolTips )也会 有明显的帮助）。</p>

<blockquote>
    <font size="2">图</font> 184 <font size="2">对于新用户来说，在菜单项里看到</font> “ <font size="2">格式库</font> ” <font size="2">这三个字，基本上就明白它是什么意思了。比起来本图中的图标
    所表示的意义要更直白。但新用户成为中级用户后，情形就不一样了《</font>
</blockquote>
<p>对应用软件只有些许了解的生疏用户而言，菜单的主要任务就是作为索引工具：当他知道 有某种功能，但不记得其位置或名称时可以参考。它的工作原理和餐馆里的菜单是一样的，帮
    助客人回忆一年前他曾点过的可口的咖喱鱼，而不需要记住其确切的菜名。他不必在脑海中记 住这些琐事，要使用它时，依靠菜单回忆就行了。</p>

<p>对于频繁使用的高级用户而言，菜单提供了一个固定的物理位置，在此可以从几百个功能 中找到他要的那个，或者作为一种快速的提醒方式告诉他相应的快捷键是什么。</p>

<p>如果菜单的主要目的是执行命令，那么就应该精炼。但如果其主要目的是告诉我们它能做 什么，如何访问它，以及快捷键是什么，那么就不应该精炼。这时，我们的菜单必须解释这些
    功能是什么，而不单是说明在哪里调用，因此菜单中应该有更详细的文本描述。我们不应该说 “ 打幵 …” ，而应该说 “ 打开 … 文件 ” ，我们不应该说 “ 自动排列 ” ，而应该说 “ 自动排列图标”。
    因为用户还不熟悉菜单里列出的功能，应该尽量直白、避免使用行话。为了提供良好的学习途 径，菜单必须要完整，将应用中全部的操作选择和可用工具都完整地呈现出来。应用中的绝大
    多数常用功能都应该可以从菜单中调出，用户浏览菜单便可以了解到它们。</p>

<p>在菜单中为相关命令提供暗示，也给了用户一个学习的途径。例如，将菜单项相对应的快 捷键或按钮图标放到旁边，可以起到暗示作用，这样用户便知道还有别的更加快捷的操作方法</p>

<p>364<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>( 本章在后面还有详细讨论）。在菜单中正确地放置这些暗示信息，用户在潜意识里会记住它们。 它们不会强行闯入用户的意识，直到用户愿意学习为止。而这时用户会发现它们就在手边，自 己早已很熟悉了。</p>

<p>最后，为了让用户更好地学会使用一个软件，他们应该能够探索和试验，而不必害怕犯错 或者是造成不可修复的破坏。因此，从菜单中调出的每个对话框中，都应该设置一个全局的“撤 销 ” 或 “ 取消 ” 按钮，用来让用户撤销操作。</p>

<p><span id="filepos0001909462"></span></p>

<p>禁用的菜单项</p>

<p><img align="baseline" alt="" height="70" src="../Images/Image00093.jpg" width="54"/></p>

<p>禁用的菜单项（让其无法使用），是一种十分重要的菜单惯例。当菜单项与所处状态无关 , 或者与所选对象无关时，该菜单项就变得不可用了，或者说不能发挥其作用了。禁用的状态通
    常用加亮或将其文本变灰来表示。这是一种非常有用的习惯用法，它让菜单更好地发挥其教学 工具的作用，因为用户便会明白在何种场合下适用何种命令。</p>

<p>设计原则</p>

<p align="right" height="6pt" width="0pt">禁用掉不适用的菜单项。</p>

<p><span id="filepos0001910479"></span></p>

<p>复选标记菜单项</p>

<p>紧挨着菜单项的复选标记，通常被用来 “ 启用 ” 和 “ 禁止 ” 应用界面中的某个方面（如打 开或关闭工具栏），或者调整数据对象的显示特征（如显示轮廓、还是显示渲染完毕的图像）。
    用户很快就能掌握这一习惯用法，而且它效果不错，因为它不仅提供了功能控制，而且还能指 示出控制的状态。</p>

<p>该习惯用法最好用在结构简单的菜单中，否则会让菜单显得臃肿，打开菜单、在菜单中移 动鼠标找相应的条目，均将耗费大量的时间和精力。如果某些属性的启用和禁止是很频繁的，
    则最好把它们放到工具栏上；如果它们不常使用，菜单占据的空间又很宝贵，那么我们最好把 这些类似的属性放在对话框中，这样还可以提供情境信息或是指导说明（对于不常用的功能， 使用者往往更需要这些信息）。</p>

<p>复选标记菜单项，远远优于可以切换两种状态的滚翻式菜单项（ flip-flop menu ),因为后者 始终显示的是没有被选中的那个项目或者状态。这种滚翻式菜单项的问题，和我们将要在第 21
    章中讨论的滚翻按钮的问题是一样的，使用者无法分辨它到底是提供一个选择，还是在描述一 个状态。比如说 “ 显示工具栏 ” ，它的意思是工具栏己经被显示出来了，还是通过此选择，你可
    以让工具栏显示出来？相反，使用复选标记菜单项（状态栏要么被标记上、要么没有），便可清</p>

<blockquote>
    365
</blockquote>
<p>楚地表达当前的意思。</p>

<p><span id="filepos0001913403"></span></p>

<p>菜单上的图标</p>

<p><img align="baseline" alt="" height="67" src="../Images/Image00312.jpg" width="54"/></p>

<p>菜单上的图标，指的是在文本描述的菜单项旁边的视觉符号。它使得用户无须阅读文本就 清楚其功能，也为执行相同任务的控件提供有利的视觉关联，特别值得一提的是，菜单项图标 与工具栏上具备相同功能的按钮图标应该是一样的。</p>

<p>设计原则</p>

<p>相同的命令要使用相同的视觉符号</p>

<p>微软 Office 套装软件中采用了 “ 彩条 ” （ ribbon) 的设计，它将菜单和工具栏合二为一，对 于既有菜单又有工具栏的应用软件来说，在菜单和工具栏之间建立起视觉联系，依然是十分必
    要的，会使用者更容易理解和使用界面。</p>

<p><span id="filepos0001914864"></span></p>

<p>快捷键</p>

<p>加速器（ accelerator) ，或者称为 “ 快捷键 ”（keyboard shortcut )，很方便地让使用者快速地 用键盘执行操作。加速器通常是功能键（如 F9) ，或包含了元键（即 Ctrl 、 Alt 、
    Option、Command 等）的组合键。一般来说，加速器对应的组合键，会显示在下拉菜单项的右侧；对于微软的 Ribbon 界面来说，则以 “ 工具提示 ” 的方式，告诉使用者某个功能对应的组合键是什么。这让使用者
    在不断使用菜单的过程中逐步学习这些快捷键。不过，在界面设计中包含使用提示，这一设计 风格指南中都会强调的原则，现实中设计师在开发应用的时候，是否按指南去做，完全取决于 设计师的个人意愿。实际上，这往往被遗忘。</p>

<p>下面的 3 个小窍门，可以帮助设计师成功创建出优秀的加速器：</p>

<p>(1) 遵循标准。</p>

<p>(2) 形成日常使用加速器的习惯。</p>

<p>(3) 标明如何使用它们。</p>

<p>凡是可以用到标准加速器的地方，就一定要使用它们 <font size="2">。一</font> 般来说，这里指的是 “ 编辑 ”(Edit) 菜单中显示的标准编辑集合，大部分的应用软件都有 “ 编辑 ” 菜单。使用者们很快就能学会
    用 Ctrl+C 和 Ctrl+V ( 在 Mac 上是用四叶草形的 Command 键来代替 Ctrl 键）进行复制和粘贴。 这比起打开菜单、鼠标移动并选择 “ 复制 ” ，再移动并选择 “ 粘贴 ” 要快多了。我们不应该让
    用户对我们设计的应用感到失望，也不应该忘记像 Ctrl+P 代表打印、 Ctrl+S 代表保存的设计</p>

<p>366</p>

<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<blockquote>
    标准。
</blockquote>

<p>确定命令集中哪些是日常要用的东西，是一件非常需要技巧的事情。你必须选出可能要经 常使用的功能，并且确保这些日常菜单项被赋予了加速器。这里的好消息是，这些日常命令的 数量并不大，坏消息是用户与用户之间对于什么算 “ 日常 ”
    的看法有着很大的差别。</p>

<p>最好的办法是对可用的功能进行 “ 验伤分类 ” ®, 将它们分成三组：每个人都认为是日常 使用的功能为一组，每个人都不认为是日常的为一组，其他为另一组。显然，第 1 组必须要用 加速器；第 2 组一定不用加速器；第 3
    组最难办，是争论最大的一组，它要视情况而定。我们 还可以继续对第 3 组进行 “ 验伤分类 ” ，继续选定出最佳的加速器，例如 F2 、 F3 、 F4 等，分配 给这组中最常用的功能。而比较模糊的加速器，例如 Alt+7
    ,应该分配给那些最不可能是每天 使用的命令。</p>

<p>一定要在菜单中将加速器显示出来，而不要把它们埋没在手册或在线帮助里，否则毫无意 义。把它们放在它们应该在的地方 —— 菜单项的右侧，用户开始不太会注意到它们，但最终会 慢慢会注意到的。永久的中间用户会为发现它们而感到高兴（参见第 11
    章）。他们会有一种成 就感，感觉到自己已经入门，这些良好的感觉会让你的用户备受鼓舞。</p>

<p>选取字母键和数字键来配合元键（即 Ctrl 、 Alt 等）形成加速器时，要选择命令名字的首字 母，例如 Ctrl+C 代表了 Copy ( 复制）命令、 Ctrl+P 代表了 Print ( 打印）命令。这样会让加速
    器更容易被记住、更易于掌握。</p>

<p>一些应用提供可自定义的组合键。通常来说，这是个好主意，甚至很有必要，特别对于专 家级用户来说，允许用户在独占性应用中定制加速器，可以让应用更加适合用户自己的操作习 惯和工作风格。不过，在提供自定义的加速器的同时，也要提供一个 “
    恢复默认值 ” 的控件， 可以让用户撤销所有的定制、恢复到出厂时的状态。</p>

<blockquote>
    ①译注：伤员验伤分类，英文 triage, 指的是按照伤员的伤病严重和紧急程度来决定治疗优先级的做法。 这种做法，在资源不足的时候，比起同时并用同样的方法治疗全部伤员的做法，会提升整体病人治疗
    的效果和效率。该做法最早可能起源于拿破仑战争时期的法国军医拉雷（全名为 Dominique Jean Larrey), 后来在第一次世界大战时在法军中得到了推广。在今天，在紧急医疗救护和处置中，这种伤
    员验伤分类的做法，依然被广泛使用。具体来说，在一战的法军前线，军医会把伤员按照如下情形分 成三类：
</blockquote>

<blockquote>
    • 不管是否立即处置，存活概率都极大的伤员。
</blockquote>

<blockquote>
    • 不管是否立即处置，死亡概率都极大的伤员。
</blockquote>

<blockquote>
    • 如果能立即处置，情况会有极大改观的伤员。
</blockquote>

<blockquote>
    367
</blockquote>
<p><span id="filepos0001925467"></span></p>

<p>助记符</p>

<p>访问键，也被称为助记符，是菜单和对话框中的另一种键盘操作的 Windows 标准（在一些 UNIX 图形用户界面中也可看到）。</p>

<p>微软风格指南详细描述了访问键和加速器的有关细节，所以我们只强调一下我们不应该忽 视它们。访问键可以使用 Alt 键、箭头键、菜单项或标题中的下画线字母来访问。例如，按下 Alt
    键时，应用软件就进入到了助记符模式，用箭头键可以导航到所需的菜单。助记符模式打 开后，按下适当的字母键就可以执行相应的菜单项的功能。访问键的主要目的，在于为每个菜
    单命令提供一个等效的键盘操作，出于此原因，它们必须是完善的，尤其面对文本的应用。不 要认为它们只是为了把键盘当做一种便利设备，我们必须要谨记，大部分经验丰富的用户非常
    依赖于自己的键盘，因此只有如此才能保持他们对产品的忠诚，才能确保访问键的一致性，才 能保证设计是全盘考虑的。访问键不是可有可无的，而是必须要有的。</p>

<p><span id="filepos0001927094"></span></p>

<p>级联菜单 VS .单层分组</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00145.jpg"/></p>

<p>下拉菜单有一种变体，当用户选择了下拉菜单中的一个标有右箭头的菜单项后，它会向右弹 出一个二级菜单，与己经激活的一级菜单同时显示，这称为级联菜单 （cascading menu )(参见图</p>

<p><font size="2">Select</font></p>

<p><font size="2">Merge Ctlls Sfjlit Cells...</font></p>

<p>S^Ht Table</p>

<p>AutoFit and Distribute</p>

<p><font size="2">Heading tows Repeat</font></p>

<p><font size="2">Columns to the Left Columns to the Right p</font> Dd Rows Above</p>

<p><font size="2">Rows Beiow b</font></p>

<p><font size="2">Cells...</font></p>

<p height="0pt" width="0pt"><font size="5">I</font></p>

<p>18- 5), 是个非常难用的家伙。用户难以定位级联菜单中的项目，它要求鼠标必须能精准地在平面 空间上移动 —— 只有非常精准，才能顺利导航。（你可以试试在多层的级联菜单中，选择某一个 项目，例如 Windows 的 “ 开始 ”
    菜单，你立即会感到鼠标的移动和走迷宫的路径差不多。）</p>

<blockquote>
    Convert Sort …
</blockquote>
<blockquote>
    Formula-
</blockquote>
<blockquote>
    Gridlines
</blockquote>
<blockquote>
    Table Properties.«
</blockquote>
<blockquote>
    <font size="2">图</font> <font size="6">18-5</font> <font size="2">这个例子是微软</font> <font size="6">Word</font> <font
        size="2">软件中的级联菜单，尽管级联菜单对于使用者浏览和找到所需的命令带来了困难，但是 它可以包含更大的命令集，这一点是有用的。</font>
</blockquote>
<blockquote>
    级联菜单，或层级式菜单，曾经一度非常流行，特别是在 GUI 出现的早期。现代 GUI 则
</blockquote>
<p align="right" height="0pt" width="0pt">第 18 章为桌面应用而设计</p>

<p>很少采用级联菜单了，大多数的菜单都是扁平的，今天基本上只有一级深度——我们称之为单 层分组 （monocline grouping) 或扁平层级。在很多情况下，这种扁平式的组织方式（来组织对
    象或者命令），对于新手用户来说极为有用，可以极大提升应用界面的可自学性（ leamability) 和可被发现性（ discoverability )。</p>

<p>对话框（我们在本章后面还会详细讨论），则是一种简版的菜单。运用对话框，软件设计者 可以将一组次级选项放在单个的交互容器中。</p>

<p>随着现代显示器技术的发展，显示器的分辨率越来越高，一个菜单栏可以显示更多的标题， 这样几乎所有的功能都可以被组织到几个不同类别的菜单组中，每组用一个单词标题来代表。
    每组的菜单有足够的屏幕空间可以包含各种相关的功能。这样一来，级联式菜单就更没有存在 的必要了。</p>

<p>如果必须要使用级联菜单，那么也一定是在设计精巧的独占式应用中使用，而且只把极为 不常用的功能放在里面。如果我们准备运用级联菜单，那么一定要确保鼠标移动的空间和阀值 足够大，以避免鼠标轻微越界造成次级菜单消失的问题。</p>

<p><span id="filepos0001933306"></span></p>

<p><font size="6">工具栏、工具板、恻栏</font></p>

<p>现在，很多地方都可以看到工具栏，实际上它在 GUI 中出现的时间并不久。微软第一个把 工具栏引入到了主流用户界面中。工具栏的发明，解决了模态下拉菜单的缺点：不易发现、执
    行命令需要烦琐的操作等。工具栏的功能是非模态的：它始终在屏幕上显示着，用户只需要移 动一次鼠标并点击它，就完成操作了。</p>

<p align="right" height="6pt" width="0pt">典型的工具栏是具有按钮功能的图标集合，以水平或垂直的方式置于主窗口的上方或侧方 , 如图 18-6 所示 <font size="2">。一</font>
    般来说，在工具栏上的按钮图标集合，通常会被排列成一行或两行（或列）。</p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span> &nbsp;<br/>
            <br/>
            <br/>
            <br/>

            <blockquote>
                <font size="2">i U*D* ©</font>
            </blockquote>
            <br/>
            <br/>

            <p align="right" height="0pt" width="0pt"><font size="2">^ B / k'</font></p><br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>

            <p>馨</p>

            <blockquote>
                <font size="2">;: rr r I + : rr</font> 令離

            </blockquote>
            <blockquote>
                :； <font size="2">TV T. f</font>

            </blockquote>
            <blockquote>
                <font size="2">I©1®* : S * A. l*^-</font> :罾 <font size="2">* Jl</font> 邊丨•《 <font size="2">7</font> •尾
                <font size="2">r 0.</font> <i>一说</i> :謬 <font size="2">《l</font> ■蒯
            </blockquote>
            <br/>
            <br/>
            <br/>
            <br/>

            <blockquote>
                十 <font size="2">^</font> 8 J?
            </blockquote>
            <br/>
            <br/>

            <blockquote>
                <font size="2">3/pK Mp* 1^1 loop*</font> 丁 &gt;0押

            </blockquote>
            <p><font size="1">J</font> <font size="2">* ■* Oz)iiP-: lp, : M (EBIsE)</font> <font size="2">图</font> <font
                    size="2">18-6</font> <font size="2">从上至下分别是：Word的工具栏、</font> <font size="2">InDesign</font> <font
                    size="2">的工具栏、</font> <font size="2">Mac</font> <font size="2">上</font> <font
                    size="2">OmniGraffle</font> <font size="2">的工具栏。请留意一下</font> <font size="2">Word</font> <font
                    size="2">和 丨</font> <font size="2">nDesign</font> <font size="2">的工具栏，它们采用了图标按钮，图标按钮上没有文字，只有当鼠标移到其上方时，才会出现提示的文本。这
                样可以节省空间，可读性也非常好。</font></p><br/>
            <br/>
        </td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>
</table>

<p><br/>
    <br/></p>

<blockquote>
    369
</blockquote>
<p><span id="filepos0001940758"></span></p>

<p>工具栏和菜单</p>

<p><img align="baseline" alt="" height="66" src="../Images/Image00332.jpg" width="54"/></p>

<p>工具栏和菜单在一起配合工作，满足了用户从新手变成老手过程中不同阶段的需求。针对 新手阶段，菜单起到了教学作用，可以让新手用户很快上手；对应用已经有了一定了解的永久
    的中间用户而言，工具栏提供了常用功能的快速访问。菜单的最大优点则是它包含了完备的功 能和详细说明，甚至不常用的功能也在其中被很好地组织起来。菜单配合工具栏，形成了完美 的互补，满足了不同用户在不同阶段的不同需求。</p>

<p>设计原则</p>

<p>工具栏为有经验的用户提供快速访问常用功能的途径。</p>

<p>但要注意，不要把工具栏当做简易高速版的菜单，而要把工具栏当做存放大多数用户所用 的最常用功能的容器。</p>

<p><span id="filepos0001942082"></span></p>

<p>工具栏 <font size="5">VS</font> .非模态对话框</p>

<p>我们在前面提到，模态化的菜单以前是因两种非模态的习惯用法而产生问题。非模态对话 框（我们将在第 21 章中详细讨论），是这两种非模态的习惯用法较老的一种。而工具栏则是最 近几年兴起的。它们之间是否有优劣之分？</p>

<p>工具栏虽然也是非模态的，但它比非模态对话框好用。工具栏还具备非模态对话框不具备 的两个有用之处：第一，它们的外形与对话框不同；第二，用完之后，不必取消它们，因为工
    具栏始终都是可见的。它们还解决了别的问题，例如它们非常节省屏幕空间，尤其与对话框比， 更是如此，不会挡住正在操作的东西。</p>

<p>用户能很快明白工具栏上被选中哪些图标，与工具栏上的小部件的交互也能对选择或整个 应用软件有直接和立即的触动，工具栏提升了整体的可学性。</p>

<p>与之相反，非模态对话框基本上是以悬浮窗口的形式出现的；用户可按喜好把它们放置在 屏幕上的任意位置。不过，这样一来，管理窗口的工作量就增加了。虽然整理窗口是避免不了 的 “ 家务活 ”
    ，但这里也有好处，我们可以把最需要的那些工具放在随手可拿的位置，这样干起 活来会很方便。</p>

<p>停靠工具栏 （docking toolbars) 是个两全其美的办法。用户可以将它从应用主窗口的边缘 拖放至自己喜欢的位置，它会自动变成一个小窗口，多数情况下还会自动优化成一个更小的矩
    形。使用完毕后，用户可以将它拖放回应用主窗口的任意边缘，它会恢复成工具栏的模样，水</p>

<p>370<br/>
    <br/></p>
</body>
</html>
